向 div 添加工具提示答案

【问题标题】：Add a tooltip to a div向 div 添加工具提示
【发布时间】：2011-10-30 07:58:00
【问题描述】：

我有一个这样的 div 标签：

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

如何在 div 的 :hover 上显示工具提示，最好带有淡入/淡出效果。

【问题讨论】：

对于一个简单的 CSS+JavaScript 解决方案，我认为您无法击败 Daniel Imms 在stackoverflow.com/questions/15702867/… 的帖子
CSS3 only
stackoverflow.com/questions/36275678/…
令人惊讶的是没有人在谈论 ARIA 标准。它应该是工具提示的起点。见Mozilla。

标签： javascript html css tooltip

【解决方案1】：

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

<div title="This is my tooltip">

喜欢：

.visible {
  height: 3em;
  width: 10em;
  background: yellow;
}

&lt;div title="This is my tooltip" class="visible"&gt;&lt;/div&gt;

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

https://jqueryhouse.com/best-jquery-tooltip-plugins/

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

【讨论】：

使用标题工具提示要注意的一点是，如果用户单击您的 div，工具提示将不会出现。这可能非常令人沮丧......特别是如果您的 div 看起来应该被点击。例如：style="光标：指针；"
@RayL 可点击工具提示不是标准行为 - 这会模糊链接和工具提示，从而阻止用户知道突出显示的单词是否会 1) 为他们提供更多信息或 2) 接受它们完全到另一个页面。一般来说，不好的做法。
@sscirrus 我同意。这就是为什么你不应该用“cursor:pointer;”来设计你的工具提示。（鼓励点击）我经常看到的。
如果您只想为某些文本显示工具提示，例如某个关键字的“详细信息”或类似内容，请改用<abbr title="...">...</abbr>；浏览器通常用破折号/圆点加下划线，表示“还有更多要说的，请参阅我的工具提示”。
在 Chrome 上，工具提示可能需要几秒钟才能出现。在我看来有点慢。

【解决方案2】：

可以仅使用 CSS，完全不需要 javascript：running demo

应用自定义 HTML 属性，例如。 data-tooltip="bla bla" 到您的对象（div 或其他）：
```
<div data-tooltip="bla bla">
    something here
</div>
```

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

[data-tooltip]:before {            
    position : absolute;
     content : attr(data-tooltip);
     opacity : 0;
}

定义每个[data-tooltip]的:hover:before悬停状态使其可见：
```
[data-tooltip]:hover:before {        
    opacity : 1;
}
```
将您的样式（颜色、大小、位置等）应用于工具提示对象；故事结束。

在演示中，我定义了另一个规则来指定工具提示是否必须在将鼠标悬停在父级之外时消失，还有另一个自定义属性 data-tooltip-persistent 和一个简单的规则：

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

注意 1： 对此的浏览器覆盖范围非常广泛，但请考虑为旧 IE 使用 javascript 后备（如果需要）。

注意 2： 增强功能可能是添加一些 javascript 来计算鼠标位置并将其添加到伪元素，方法是更改应用于它的类。

【讨论】：

@AndreaLigios 这可以改变吗，以便工具提示在未显示时缩放为 1x1px，并且该像素应位于文本的 0,0 坐标处？目前demo有一个小问题：将鼠标放在demo中第三个div下方的区域时，tooltip开始出现，但随后又离开了鼠标指针，所以又回到了它的起始位置，即再次欺骗出现。这发生得非常快，而且闪烁不定。
很好的答案安德里亚，接受的答案已经过时了。 jsfiddle 帮了大忙。
我喜欢这个问题有两个很好的答案。一个简单，另一个可定制。
这太棒了！但是：我们如何在此处添加换行符？它似乎忽略了<br> 和其他类似\n 或\r 的内容，因为它们只是在字符串的其余部分中显示为纯文本。 更新： 我刚刚注意到设置最大宽度会使其自动调整其内容并放置换行符。真的很整齐！（但是，如果有人知道答案，我仍然会很感激）
@LinusGeffarth 你可以用 white-space: pre-wrap;在当前的 Chrome 上。不过我还没有测试过其他浏览器。

【解决方案3】：

你根本不需要 JavaScript；只需设置 title 属性：

<div title="Hello, World!">
  <label>Name</label>
  <input type="text"/>
</div>

请注意，工具提示的视觉呈现取决于浏览器/操作系统，因此它可能会淡入，也可能不会。然而，这是处理工具提示的语义方式，它可以与屏幕阅读器等无障碍软件一起正常工作。

堆栈片段中的演示

<div title="Hello, World!">
  <label>Name</label>
  <input type="text"/>
</div>

【讨论】：

是的，但是如果 OP 想要以某种方式设置工具提示的样式，那么 CSS 实现会更好
@YvonneAburrow 这个答案不仅适用于 OP。
很公平。但有时需要在工具提示中写一篇文章，而在这种情况下，title 属性并不能解决问题。
@YvonneAburrow ...这就是为什么有多个赞成的答案。如果您需要简单快捷的东西，title 可以。如果您需要更复杂的东西，还有其他更复杂的答案。老实说，我不确定您要在这里表达什么观点。

【解决方案4】：

这是一个纯 CSS 3 实现（带有可选的 JS）

您唯一需要做的就是在任何 div 上设置一个名为“data-tooltip”的属性，当您将鼠标悬停在它上面时，该文本将显示在它旁边。

我包含了一些可选的 JavaScript，它们会导致工具提示显示在光标附近。 如果你不需要这个功能，你可以放心地忽略这个小提琴的 JavaScript 部分。

如果您不想在悬停状态下淡入，只需删除过渡属性。

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

HTML 示例：

<div data-tooltip="your tooltip message"></div>

CSS：

*[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：

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  }'

}

【讨论】：

【解决方案5】：

这是一个不错的 jQuery 工具提示：

https://jqueryui.com/tooltip/

要实现这一点，只需按照以下步骤操作：

将此代码添加到您的<head></head> 标签中：

<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>    
<script type="text/javascript">
$("[title]").tooltip();
</script> 
<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 被禁用时，它将回退到默认的浏览器/操作系统工具提示。

【讨论】：

【解决方案6】：

我做了一些应该也能适应 div 的事情。

HTML

<td>
    <%# (Eval("Name").ToString().Length > 65) ? Eval("Name").ToString().Substring(0, 60) + "..." : Eval("Name")%>
    <span class="showonhover">
        <a href="#"><%# (Eval("Name").ToString().Length > 65) ? "More" : "" %></a>
        <span class="hovertext">
            <%# Eval("Name") %>
        </span>
    </span>
</td>

CSS

.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;}

如需更深入的讨论，请参阅我的帖子：

A simple Formatted ToolTip text on hover

【讨论】：

问题是针对 html 解决方案，而不是一些 .net 服务器端的魔法。
.net 代码在那里显示截断。使用html和css的方法仍然有效。
这是最简单最好的解决方案，因为它不依赖 JS。只需使 span.showonhover 可聚焦或将 span.hovertext 移动到链接中，屏幕阅读器就可以完全访问您（因此比标题属性解决方案更好）。哦，忘了

【解决方案7】：

好的，这里满足了你的所有赏金要求：

没有 jQuery
即刻出现
在鼠标离开该区域之前不会消失
加入淡入/淡出效果
最后.. 简单的解决方案

Here's a demo and link to my code (JSFiddle)

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

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

HTML：

<div id="wrapper">
    <div id="a">Hover over this div to see a cool tool tip!</div>
</div>

CSS：

#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：

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);

【讨论】：

快速移入和移出光标会生成多个不会在您的 jsfiddle 中消失的工具提示。
我想知道，如果工具提示出现在鼠标位置。很棒的定制。

【解决方案8】：

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

http://jsfiddle.net/clintioo/gLeydk0k/11/

<div data-tooltip="This is my tooltip">
    <label>Name</label>
    <input type="text" />
</div>

。

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;
}

【讨论】：

【解决方案9】：

您可以使用标题。它几乎适用于所有事情

<div title="Great for making new friends through cooperation.">

<input script=JavaScript type=button title="Click for a compliment" onclick="window.alert('Your hair reminds me of a sunset across a prairie')" value="making you happy">

<table title="Great job working for those who understand the way i feel">

想想任何对 html 窗口可见的标签，然后在它的标签内插入一个title="whatever tooltip you'd like"，你就会得到一个工具提示。

【讨论】：

我不明白为什么你的票数这么少。我确信有一个简单的解决方案，但是人们以及 w3schools 为这样一个简单的事情提出了复杂的解决方案。谢谢。

【解决方案10】：

我开发了三种渐变效果：

/* 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;
    }

 <h1>FADE</h1>

      <div class="tooltip fade" data-title="Hypertext Markup Language">
      <label>Name</label>
      <input type="text"/>
      </div>
      

    <h1>EXPAND</h1>

      <div class="tooltip expand" data-title="Hypertext Markup Language">
      <label>Name</label>
      <input type="text"/>
      </div>
      

    <h1>SWING</h1>

      <div class="tooltip swing" data-title="Hypertext Markup Language"> 
      <label>Name</label>
      <input type="text"/>
      </div>

【讨论】：

【解决方案11】：

您可以像这样在onmouseover 和onmouseout 期间切换子div：

function Tooltip(el, text) {
  el.onmouseover = function() {
    el.innerHTML += '<div class="tooltip">' + text + '</div>' 
    }
  el.onmouseout = function() {
    el.removeChild(el.querySelector(".tooltip"))
  }
}

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

堆栈片段和jsFiddle 中的示例

function Tooltip(el, text) {
  el.onmouseover = function() {
    el.innerHTML += '<div class="tooltip">' + text + '</div>'
  }
  el.onmouseout = function() {
    el.removeChild(el.querySelector(".tooltip"))
  }
}

//Sample Usage
Tooltip(document.getElementById("mydiv"), "I'm a tooltip")

#mydiv {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 50px;
  padding: 5px 10px;
  background-color: #e2f7ff;
  box-shadow: 1px 1px 1px 0px #cecece;
}

.tooltip {
  position: absolute;
  display: inline-block;
  white-space: nowrap;
  width: auto;
  height: auto;
  background-color: #11121b;
  color: white;
  padding: 4px 6px;
  border-radius: 3px;
  z-index: 99;
  left: 100%;
  top: 0;
}

&lt;div id="mydiv"&gt; This is just a div &lt;/div&gt;

【讨论】：

【解决方案12】：

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

<div style="background: yellow;">
    <div style="display: inline-block; position: relative; background: pink;">
        <label>Name</label>
        <input type="text" />

        <div style="background: #e5e5e5; position: absolute; top: -10px; left: 0; right: 0;">
            Tooltip text
        </div>
    </div>
</div>

【讨论】：

【解决方案13】：

试试这个。你可以只用 css 来做，我只为工具提示添加了data-title 属性。

.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;
}

<div data-title="My tooltip" class="tooltip">
    <label>Name</label>
    <input type="text"/>
</div>

【讨论】：

【解决方案14】：

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

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);
}

.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;
}

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>.

（另见this Fiddle）

【讨论】：

【解决方案15】：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI tooltip</title>
  <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>
  <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>  
  <script>
  $(function() {
    $("#tooltip").tooltip();
  });
  </script>
</head>
<body>
<div id="tooltip" title="I am tooltip">mouse over me</div>
</body>
</html>

您还可以自定义工具提示样式。请参考这个链接： http://jqueryui.com/tooltip/#custom-style

【讨论】：

【解决方案16】：

只有 CSS3 的解决方案可能是：

CSS3：

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

HTML5：

<div style="background: yellow;">
    <div id="tooltip-1" data-title="Tooltip Text" style="display: inline-block; position: relative; background: pink;">
        <label>Name</label>
        <input type="text" />
    </div>
</div>

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

【讨论】：

你为什么要使用 id 来设置你想要更多实例的样式，然后在你可以只使用一个类和 .tooltip 的情况下使用 [id^=tooltip] 选择器？
你是对的。我从 ids 开始，所以跟着它，完全错过了它。但是，嘿，有人可能会从中受益。哦，顺便说一句，我们甚至可以使用属性选择器来选择“数据标题”（例如div[data-title])，而无需添加额外的标记。

【解决方案17】：

您可以使用简单的 css...jsfiddle 在这里您可以看到示例

下面是工具提示的 css 代码

[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;
}

【讨论】：

【解决方案18】：

不使用任何 API 你也可以使用纯 CSS 和 Jquery Demo

来做这样的事情

HTML

<div class="pointer_tooltip"> 
    Click & Drag to draw the area
</div>

CSS

.pointer_tooltip{
  width : auto;
  height : auto;
  padding : 10px;
  border-radius : 5px;
  background-color : #fff;
  position: absolute;
}

jQuery

$(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');
});

【讨论】：

【解决方案19】：

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

HTML

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

CSS

.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;
    }

【讨论】：

【解决方案20】：

工具提示定位纯css

      div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%); /* IE 9 */
        -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	
							
        text-align: center;
      }  					
	
      .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
      }

      .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        //text-align: center;
        border-radius: 6px;
        padding: 5px 0;

        /* Position the tooltip */
        position: absolute;
        z-index: 1;
      }

      .tooltip:hover .tooltiptext {
        visibility: visible;
      }		
					
      .toolLeft {
        top: -5px;
        right: 105%;
      }					
					
      .toolRight {
        top: -5px;
        left: 105%;
      }
					
      .toolTop {
        bottom: 100%;
        left: 50%;
        margin-left: -60px;
      }
					
      .toolBottom {
        top: 100%;
        left: 50%;
        margin-left: -60px;
      }

    <div>
			
      <div class="tooltip">Top <span class="tooltiptext toolTop">Tooltip text</span></div><br />
      <div class="tooltip">Left  <span class="tooltiptext toolLeft">Tooltip text</span></div><br />			
      <div class="tooltip">Right <span class="tooltiptext toolRight">Tooltip text</span></div><br />
      <div class="tooltip">Bottom  <span class="tooltiptext toolBottom">Tooltip text</span></div><br />			
			
    </div>

【讨论】：

【解决方案21】：

您也可以将其用作工具提示...它的工作原理相同，但您必须编写额外的标签就是它..

<abbr title="THis is tooltip"></abbr>

【讨论】：

【解决方案22】：

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

这是css：

    .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标签可以是这样的：

<p data-tooltip-position="right" data-tooltip="Some tooltip text here" title="">Text Here</p>

<p data-tooltip-position="left" data-tooltip="Some tooltip text here" title="">Text Here</p>

<p data-tooltip-position="top" data-tooltip="Some tooltip text here" title="">Text Here</p>

<p data-tooltip-position="bottom" data-tooltip="Some tooltip text here" title="">Text Here</p>

【讨论】：

【解决方案23】：

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

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

进一步阅读here

【讨论】：

【解决方案24】：

还有我的版本

.tooltip{
display: inline;
position: relative; /** very important set to relative*/
}

.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;
}

.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

<div title="This is some information for our tooltip." class="tooltip">bar </div>

【讨论】：

【解决方案25】：

我为它创建了一种公式。首先这是html

<div class="tooltip-container">
  <button class="tooltip-tarjet">
    My Button
  </button>
  <div class="tooltip-element"> 
    This is my tooltip content right here...
  </div>
</div>

现在是它的 css

.tooltip-container { 
  /* it contains the tooltip message and the one firing the tooltip
   * it has position relative since it allows for a better responsive positioning
   * of the tooltip-element */
  display: inline-block;
  position: relative;
  flex-direction: row;
}
.tooltip-tarjet:hover + .tooltip-element {
  /* this selector rule matches the tooltip-element right after
   * tooltip-tarjet at a hover action
   *  */
  display: inline-block;
  position: absolute;
  background-color: #869096;
  color: white;
  opacity: 1;
  transition: all 1s;
}
.tooltip-element { 
  /* here goes the tooltip-element styles and positioning, now your
   * tooltip element will always remain to your desired positionno matter
   * the screen size at hand 
   *  */ 
  display: none; 
  opacity: 0;
  text-align: center;
  padding: 7px;
  z-index: 10;
  width: 200px;
  left: -60px;
  bottom: 48px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  font-size: 12px;
  line-height: 1.5;
}

【讨论】：