关于javascript：如何向div添加工具提示


How to add a tooltip to a div

我有一个DIV标记，如下所示：

1
2
3
4
5
6
7
8
9
<html>
    <head></head>
    <body>
       
            <label>Name</label>
            <input type="text"/>
       
    </body>
</html>

现在我想要一个简单的javascript来显示工具提示：悬停在这个分区。有人能帮我吗？工具提示还应具有淡入/淡出效果。

相关讨论

对于基本工具提示，您需要：

1
 

对于更高级的javascript版本，您可以查看：

24 Best jQuery Tooltip Plugins for Your Projects

上面的链接为您提供了25个工具提示选项。

相关讨论

它只能用css来完成，根本没有javascript：运行demo

  • 将自定义HTML属性(如tooltip="bla bla"应用于对象(DIV或其他类型)：

    1
        something here

  • 将每个[tooltip]对象的:before伪元素定义为透明、绝对定位、以tooltip=""值为内容：

    1
    2
    3
    4
    5
    [tooltip]:before {            
        position : absolute;
         content : attr(tooltip);
         opacity : 0;
    }

  • 定义每个[tooltip]的:hover:before悬停状态，使其可见：

    1
    2
    3
    [tooltip]:hover:before {        
        opacity : 1;
    }

  • 将样式(颜色、大小、位置等)应用于工具提示对象；文章结尾。

    • 在演示中，我定义了另一个规则来指定当工具提示悬停在它上面但在父级之外时是否必须消失，使用另一个自定义属性tooltip-persistent和一个简单的规则：

    1
    2
    3
    [tooltip]:not([tooltip-persistent]):before {
        pointer-events: none;
    }

    注1：浏览器对此的覆盖范围非常广，但是考虑对旧的IE使用JavaScript回退(如果需要)。

    注2：一个增强可能是通过更改应用于它的类，添加一点javascript来计算鼠标位置并将其添加到伪元素中。

    相关讨论

    您根本不需要javascript；只需设置title属性：

    1
    2
    3
    4
    5
    6
    7
    8
    <html><head></head>
    <body>

    <label>Name</label>
    <input type="text"/>

    </body>
    </html>

    请注意，工具提示的可视表示形式依赖于浏览器/OS，因此它可能会淡入，也可能不会淡入。然而，这是执行工具提示的语义方法，它将与屏幕阅读器等可访问性软件一起正常工作。

    见：

    1
    2
    <label>Name</label>
    <input type="text"/>

    相关讨论

    这里有一个很好的jquery工具提示：

    https://jqueryui.com/tooltip/工具提示/

    要实现这一点，只需执行以下步骤：

  • 在您的标签中添加此代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js">    
    <script type="text/javascript">
    $("[title]").tooltip();
     
    <style type="text/css">

    /* tooltip styling. by default the element to be styled is .tooltip  */
    .tooltip {
        display:none;
        background:transparent url(https://dl.dropboxusercontent.com/u/25819920/tooltip/black_arrow.png);
        font-size:12px;
        height:70px;
        width:160px;
        padding:25px;
        color:#fff;
    }
    </style>

  • 在要使用工具提示的HTML元素上，只需向其添加一个title属性。标题属性中的任何文本都将显示在工具提示中。

    • 注意：禁用javascript时，它将回退到默认的浏览器/操作系统工具提示。

    我做了一些应该能够适应DIV的事情。

    HTML

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <td>
        <%# (Eval("Name").ToString().Length > 65) ? Eval("Name").ToString().Substring(0, 60) +"..." : Eval("Name")%>
        <span class="showonhover">
            <%# (Eval("Name").ToString().Length > 65) ?"More" :"" %>
            <span class="hovertext">
                <%# Eval("Name") %>
            </span>
        </span>
    </td>

    CSS

    1
    2
    3
    4
    5
    .showonhover .hovertext { display: none;}
    .showonhover:hover .hovertext {display: inline;}
    a.viewdescription {color:#999;}
    a.viewdescription:hover {background-color:#999; color: White;}
    .hovertext {position:absolute;z-index:1000;border:1px solid #ffd971;background-color:#fffdce;padding:11px;width:150px;font-size: 0.75em;}

    有关更深入的讨论，请参阅我的文章：

    悬停时的简单格式工具提示文本

    相关讨论

    这里是一个纯的CSS 3实现(带有可选的JS)

    您唯一需要做的就是在名为"数据工具提示"的任何分区上设置一个属性，当您将鼠标悬停在该分区上时，该文本将显示在该分区旁边。

    我已经包含了一些可选的javascript，它将导致工具提示显示在光标附近。如果您不需要这个特性，您可以安全地忽略这个小提琴的javascript部分。

    如果不希望淡入悬停状态，只需删除过渡属性。

    它的样式类似于title属性工具提示。这是jfiddle:http://jsfiddle.net/toe0hcyn/1/

    HTML示例：

    1
     

    CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    *[data-tooltip] {
        position: relative;
    }

    *[data-tooltip]::after {
        content: attr(data-tooltip);

        position: absolute;
        top: -20px;
        right: -20px;
        width: 150px;

        pointer-events: none;
        opacity: 0;
        -webkit-transition: opacity .15s ease-in-out;
        -moz-transition: opacity .15s ease-in-out;
        -ms-transition: opacity .15s ease-in-out;
        -o-transition: opacity .15s ease-in-out;
        transition: opacity .15s ease-in-out;

        display: block;
        font-size: 12px;
        line-height: 16px;
        background: #fefdcd;
        padding: 2px 2px;
        border: 1px solid #c0c0c0;
        box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.4);
    }

    *[data-tooltip]:hover::after {
        opacity: 1;
    }

    用于基于鼠标位置的工具提示位置更改的可选javascript：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    var style = document.createElement('style');
    document.head.appendChild(style);

    var matchingElements = [];
    var allElements = document.getElementsByTagName('*');
    for (var i = 0, n = allElements.length; i < n; i++) {
        var attr = allElements[i].getAttribute('data-tooltip');
        if (attr) {
            allElements[i].addEventListener('mouseover', hoverEvent);
        }
    }

    function hoverEvent(event) {
        event.preventDefault();
        x = event.x - this.offsetLeft;
        y = event.y - this.offsetTop;

        // Make it hang below the cursor a bit.
        y += 10;

        style.innerHTML = '*[data-tooltip]::after { left: ' + x + 'px; top: ' + y + 'px  }'

    }

    好吧，以下是你所有的赏金要求：

    • 没有jQuery
    • 即时出现
    • 在老鼠离开这个区域之前不要拆模。
    • 融入淡入/淡出效果
    • 最后…简单解

    这是一个演示和到我的代码(JSfiddle)的链接

    以下是我在这个纯JS、CSS和HTML5小提琴中加入的功能：

    • 您可以设置渐变的速度。
    • 可以使用简单变量设置工具提示的文本。

    HTML：

    1
        Hover over this div to see a cool tool tip!

    CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    #a{
        background-color:yellow;
        padding:10px;
        border:2px solid red;    
    }

    .tooltip{
        background:black;
        color:white;
        padding:5px;
        box-shadow:0 0 10px 0 rgba(0, 0, 0, 1);
        border-radius:10px;
        opacity:0;
    }

    JavaScript：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    var div = document.getElementById('wrapper');
    var a = document.getElementById("a");
    var fadeSpeed = 25; // a value between 1 and 1000 where 1000 will take 10
                        // seconds to fade in and out and 1 will take 0.01 sec.
    var tipMessage ="The content of the tooltip...";

    var showTip = function(){    
        var tip = document.createElement("span");
        tip.className ="tooltip";
        tip.id ="tip";
        tip.innerHTML = tipMessage;
        div.appendChild(tip);
        tip.style.opacity="0"; // to start with...
        var intId = setInterval(function(){
            newOpacity = parseFloat(tip.style.opacity)+0.1;
            tip.style.opacity = newOpacity.toString();
            if(tip.style.opacity =="1"){
                clearInterval(intId);
            }
        }, fadeSpeed);
    };
    var hideTip = function(){
        var tip = document.getElementById("tip");
        var intId = setInterval(function(){
            newOpacity = parseFloat(tip.style.opacity)-0.1;
            tip.style.opacity = newOpacity.toString();
            if(tip.style.opacity =="0"){
                clearInterval(intId);
                tip.remove();
            }
        }, fadeSpeed);
        tip.remove();
    };

    a.addEventListener("mouseover", showTip, false);
    a.addEventListener("mouseout", hideTip, false);
    相关讨论

    您可以使用数据属性、伪元素和content: attr()等创建自定义CSS工具提示。

    http://jsfiddle.net/clintio/gleydk0k/11/

    1
    2
        <label>Name</label>
        <input type="text" />

    .

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    div:hover:before {
        content: attr(data-tooltip);
        position: absolute;
        padding: 5px 10px;
        margin: -3px 0 0 180px;
        background: orange;
        color: white;
        border-radius: 3px;
    }

    div:hover:after {
        content: '';
        position: absolute;
        margin: 6px 0 0 3px;
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-right: 10px solid orange;
        border-bottom: 5px solid transparent;
    }

    input[type="text"] {
        width: 125px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    这个怎么样，抱歉代码没有优化，因为我赶时间，但我想你会明白的：

    http://jsfiddle.net/prollygeek/1b0lrr8d/

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    //Auxiliary functions
    function createToolTip(divName,tips)
    {
     document.getElementById(divName).innerHTML+=''+tips+''
    }
    function removeToolTip(divName)
    {
    document.getElementById(divName).removeChild( document.getElementById(divName).getElementsByClassName("tooltip")[0])
    }
    function Tooltip(divName,tips)
    {
    document.getElementById(divName).onmouseover=function(){createToolTip(divName,tips)}

    document.getElementById(divName).onmouseout=function(){removeToolTip(divName)}
    }

    //Sample Usage
    Tooltip("mydiv","hello im a tip div")

    最简单的方法是在包含元素上设置position: relative，在容器内的工具提示元素上设置position: absolute，使其相对于父元素(包含元素)浮动。例如：

    10

    我开发了三种类型的渐变效果：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    /* setup tooltips */
        .tooltip {
          position: relative;
        }
        .tooltip:before,
        .tooltip:after {
          display: block;
          opacity: 0;
          pointer-events: none;
          position: absolute;
        }
        .tooltip:after {
            border-right: 6px solid transparent;
            border-bottom: 6px solid rgba(0,0,0,.75);
          border-left: 6px solid transparent;
          content: '';
          height: 0;
            top: 20px;
            left: 20px;
          width: 0;
        }
        .tooltip:before {
          background: rgba(0,0,0,.75);
          border-radius: 2px;
          color: #fff;
          content: attr(data-title);
          font-size: 14px;
          padding: 6px 10px;
            top: 26px;
          white-space: nowrap;
        }

        /* the animations */
        /* fade */
        .tooltip.fade:after,
        .tooltip.fade:before {
          transform: translate3d(0,-10px,0);
          transition: all .15s ease-in-out;
        }
        .tooltip.fade:hover:after,
        .tooltip.fade:hover:before {
          opacity: 1;
          transform: translate3d(0,0,0);
        }

        /* expand */
        .tooltip.expand:before {
          transform: scale3d(.2,.2,1);
          transition: all .2s ease-in-out;
        }
        .tooltip.expand:after {
          transform: translate3d(0,6px,0);
          transition: all .1s ease-in-out;
        }
        .tooltip.expand:hover:before,
        .tooltip.expand:hover:after {
          opacity: 1;
          transform: scale3d(1,1,1);
        }
        .tooltip.expand:hover:after {
          transition: all .2s .1s ease-in-out;
        }

        /* swing */
        .tooltip.swing:before,
        .tooltip.swing:after {
          transform: translate3d(0,30px,0) rotate3d(0,0,1,60deg);
          transform-origin: 0 0;
          transition: transform .15s ease-in-out, opacity .2s;
        }
        .tooltip.swing:after {
          transform: translate3d(0,60px,0);
          transition: transform .15s ease-in-out, opacity .2s;
        }
        .tooltip.swing:hover:before,
        .tooltip.swing:hover:after {
          opacity: 1;
          transform: translate3d(0,0,0) rotate3d(1,1,1,0deg);
        }

        /* basic styling: has nothing to do with tooltips: */
        h1 {
          padding-left: 50px;
        }
        ul {
          margin-bottom: 40px;
        }
        li {
          cursor: pointer;
          display: inline-block;
          padding: 0 10px;
        }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
     FADE

         
          <label>Name</label>
          <input type="text"/>
         
         

        EXPAND

         
          <label>Name</label>
          <input type="text"/>
         
         

        SWING

           
          <label>Name</label>
          <input type="text"/>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      jQuery UI tooltip
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
      <script src="http://code.jquery.com/jquery-1.10.2.js">
      <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js">  
     
      $(function() {
        $("#tooltip").tooltip();
      });
     
    </head>
    <body>
    mouse over me
    </body>
    </html>

    还可以自定义工具提示样式。请参阅此链接：http://jqueryui.com/tooltip/自定义样式

    试试这个。你只需要CSS就可以做到，我只为工具提示添加了data-title属性。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .tooltip{
      position:relative;
      display: inline-block;
    }
    .tooltip[data-title]:hover:after {
      content: attr(data-title);
      padding: 4px 8px;
      color: #fff;
      position: absolute;
      left: 0;
      top: 110%;
      white-space: nowrap;  
      border-radius: 5px;  
      background:#000;
    }
    1
    2
        <label>Name</label>
        <input type="text"/>

    CSS3唯一的解决方案可能是：

    CSS3：

    1
    div[id^="tooltip"]:after {content: attr(data-title); background: #e5e5e5; position: absolute; top: -10px; left:  0; right: 0; z-index: 1000;}

    HTML5：

    1
    2
            <label>Name</label>
            <input type="text" />

    然后你可以用同样的方法创建一个tooltip-2DIV…当然，您也可以使用title属性而不是data属性。

    相关讨论

    你可以用标题。一切都能用

    只要想一想HTML窗口可以看到的任何标记，在它的标记中插入一个title="whatever tooltip you'd like"，你就得到了一个工具提示。

    你可以使用纯CSS制作工具提示。试试这个。希望它能帮助你解决问题。

    HTML

    1
    2
     Name
        <span class="tooltiptext">Add your tooltip text here.</span>

    CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    .tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 270px;
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 1s;
        }

        .tooltip .tooltiptext::after {
            content:"";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

    你可以用简单的css…jsfiddle这里您可以看到示例

    工具提示的CSS代码下方

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    [data-tooltip] {
      position: relative;
      z-index: 2;
      cursor: pointer;
    }

    /* Hide the tooltip content by default */
    [data-tooltip]:before,
    [data-tooltip]:after {
      visibility: hidden;
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
      opacity: 0;
      pointer-events: none;
    }

    /* Position tooltip above the element */
    [data-tooltip]:before {
      position: absolute;
      bottom: 150%;
      left: 50%;
      margin-bottom: 5px;
      margin-left: -80px;
      padding: 7px;
      width: 160px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      background-color: #000;
      background-color: hsla(0, 0%, 20%, 0.9);
      color: #fff;
      content: attr(data-tooltip);
      text-align: center;
      font-size: 14px;
      line-height: 1.2;
    }

    /* Triangle hack to make tooltip look like a speech bubble */
    [data-tooltip]:after {
      position: absolute;
      bottom: 150%;
      left: 50%;
      margin-left: -5px;
      width: 0;
      border-top: 5px solid #000;
      border-top: 5px solid hsla(0, 0%, 20%, 0.9);
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      content:"";
      font-size: 0;
      line-height: 0;
    }

    /* Show tooltip content on hover */
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after {
      visibility: visible;
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
      opacity: 1;
    }

    下面是一个简单的工具提示实现，它考虑了鼠标的位置以及窗口的高度和宽度：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    function showTooltip(e) {
      var tooltip = e.target.classList.contains("tooltip")
          ? e.target
          : e.target.querySelector(":scope .tooltip");
      tooltip.style.left =
          (e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth)
              ? (e.pageX + 10 +"px")
              : (document.body.clientWidth + 5 - tooltip.clientWidth +"px");
      tooltip.style.top =
          (e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight)
              ? (e.pageY + 10 +"px")
              : (document.body.clientHeight + 5 - tooltip.clientHeight +"px");
    }

    var tooltips = document.querySelectorAll('.couponcode');
    for(var i = 0; i < tooltips.length; i++) {
      tooltips[i].addEventListener('mousemove', showTooltip);
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    .couponcode {
        color: red;
        cursor: pointer;
    }

    .couponcode:hover .tooltip {
        display: block;
    }

    .tooltip {
        position: absolute;
        white-space: nowrap;
        display: none;
        background: #ffffcc;
        border: 1px solid black;
        padding: 5px;
        z-index: 1000;
        color: black;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    Lorem ipsum dolor sit amet, <span class="couponcode">consectetur
    adipiscing<span class="tooltip">This is a tooltip</span></span>
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span
    class="couponcode">reprehenderit<span class="tooltip">This is
    another tooltip</span></span> in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est <span
    class="couponcode">laborum<span class="tooltip">This is yet
    another tooltip</span></span>.

    (另见此小提琴)

    不使用任何API通过使用纯CSS和jquery演示，您也可以这样做。

    HTML

    1
        Click & Drag to draw the area

    CSS

    1
    2
    3
    4
    5
    6
    7
    8
    .pointer_tooltip{
      width : auto;
      height : auto;
      padding : 10px;
      border-radius : 5px;
      background-color : #fff;
      position: absolute;
    }

    滑动分页

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    $(document).mousemove(function( event ) {
        var pageCoords ="(" + event.pageX +"," + event.pageY +" )";  

        //set the actuall width
        $('.pointer_tooltip').width($('.pointer_tooltip').width());
        var position_top = event.pageY+18;
        var position_left = event.pageX-60;          
        var width=$('body').width()-$('.pointer_tooltip').width();

        //check if left not minus
        if(position_left<0){
          position_left=10;
        }else if(position_left > width){
         position_left=width-10;
        }      


        $('.pointer_tooltip').css('top',position_top+'px');
        $('.pointer_tooltip').css('left',position_left+'px');
    });

    这个问题有很多答案，但仍然有可能对某人有所帮助。它适用于所有左、右、上、下位置。

    这是CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
        .m-tb-5 {
            margin-top: 2px;
            margin-bottom: 2px;
        }
        [data-tooltip] {
            display: inline-block;
            position: relative;
            cursor: help;
            padding: 3px;
        }
        /* Tooltip styling */
        [data-tooltip]:before {
            content: attr(data-tooltip);
            display: none;
            position: absolute;
            background: #000;
            color: #fff;
            padding: 3px 6px;
            font-size: 10px;
            line-height: 1.4;
            min-width: 100px;
            text-align: center;
            border-radius: 4px;
        }
        /* Dynamic horizontal centering */
        [data-tooltip-position="top"]:before,
        [data-tooltip-position="bottom"]:before {
            left: 50%;
            -ms-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }
        /* Dynamic vertical centering */
        [data-tooltip-position="right"]:before,
        [data-tooltip-position="left"]:before {
            top: 50%;
            -ms-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }
        [data-tooltip-position="top"]:before {
            bottom: 100%;
            margin-bottom: 6px;
        }
        [data-tooltip-position="right"]:before {
            left: 100%;
            margin-left: 6px;
        }
        [data-tooltip-position="bottom"]:before {
            top: 100%;
            margin-top: 6px;
        }
        [data-tooltip-position="left"]:before {
            right: 100%;
            margin-right: 6px;
        }

        /* Tooltip arrow styling/placement */
        [data-tooltip]:after {
            content: '';
            display: none;
            position: absolute;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
        }
        /* Dynamic horizontal centering for the tooltip */
        [data-tooltip-position="top"]:after,
        [data-tooltip-position="bottom"]:after {
            left: 50%;
            margin-left: -6px;
        }
        /* Dynamic vertical centering for the tooltip */
        [data-tooltip-position="right"]:after,
        [data-tooltip-position="left"]:after {
            top: 50%;
            margin-top: -6px;
        }
        [data-tooltip-position="top"]:after {
            bottom: 100%;
            border-width: 6px 6px 0;
            border-top-color: #000;
        }
        [data-tooltip-position="right"]:after {
            left: 100%;
            border-width: 6px 6px 6px 0;
            border-right-color: #000;
        }

        [data-tooltip-position="left"]:after {
            right: 100%;
            border-width: 6px 0 6px 6px;
            border-left-color: #000;
        }
        /* Show the tooltip when hovering */
        [data-tooltip]:hover:before,
        [data-tooltip]:hover:after {
            display: block;
            z-index: 50;
        }

    HTML标签可以是这样的：

    Text Here

    Text Here

    Text Here

    Text Here

    工具提示位置纯CSS

    10

    1
    2
    3
    4
          Top <span class="tooltiptext toolTop">Tooltip text</span><br />
          Left  <span class="tooltiptext toolLeft">Tooltip text</span><br />           
          Right <span class="tooltiptext toolRight">Tooltip text</span><br />
          Bottom  <span class="tooltiptext toolBottom">Tooltip text</span><br />

    我的版本

    1
    2
    3
    .tooltip{
    display: inline;
    position: relative; /** very important set to relative*/

    }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .tooltip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title); /**extract the content from the title */
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;

    }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content:"";
    left: 50%;
    position: absolute;
    z-index: 99;

    }

    然后是HTML

    1
    bar

    您可以尝试引导工具提示。

    1
    2
    3
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })

    在这里进一步阅读

    您也可以将其用作工具提示…它的工作原理相同，但您必须编写额外的标记。

    1
    </abbr>

    Azle有一个很好的实现。假设我的目标元素是一个图标，类名为"我的图标"。只需使用azle的add_tooltip函数将元素作为目标：

    1
    2
    3
    4
    az.add_tooltip('my_icon', 1, {
       "this_class" :"my_tooltip",
       "text" :"HELLO THERE!"
    })

    enter image description here

    可以使用常规的CSS样式控制工具提示的位置和样式。上面的工具提示样式如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    az.style_tooltip('my_tooltip', 1, {
       "background" :"black",
       "margin-left" :"10px",
       "color" :"hotpink",
       "font-weight" :"bold",
       "font-family" :"Arial",
       "padding" :"10px",
       "border-radius" :"10px"
    })

    我们还可以通过指定"图像路径"将图像添加到工具提示中：

    1
    2
    3
    4
    5
    6
    az.add_tooltip('my_icon', 1, {
       "this_class" :"my_tooltip",
       "text" :"HELLO THERE!",
       "image_path" :"https://cdn-images-1.medium.com/max/1874/1*toepgVwopga9TYFpSkSxXw.png",
       "image_class" :"my_image"
    })

    enter image description here

    因为我们在上面指定了一个"image_类"，所以我们可以使用相同的style_工具提示函数设置图像的样式，这次是针对图像。上面的游戏图片样式如下：

    1
    2
    3
    4
    az.style_tooltip('my_image', 1, {
       "width" :"50px",
       "align" :"center"
    })

    下面是一个使用较大图像的示例：

    enter image description here

    …添加和样式如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    az.add_tooltip('my_icon', 1, {
       "this_class" :"my_tooltip",
       "text" :"MORE INFO",
       "image_path" :"https://i0.wp.com/proactive.ie/wp-content/uploads/2017/11/Infographic.jpg?resize=1240%2C1062&ssl=1",
       "image_class" :"my_image"
    })

    az.style_tooltip('my_image', 1, {
       "width" :"500px"
    })

    这是整个代码的要点。

    你可以坐这把小提琴到处玩。

    1
        Your Text....

    向DIV元素添加工具提示的最简单方法。

    相关讨论