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

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

我的版本是

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

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

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

(也可以参看这把小提琴)

我为它创造了一个公式。 首先是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;
}

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

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

进一步阅读

这是一个漂亮的jQuery工具提示:

https://jqueryui.com/tooltip/

要实现这一点，只需遵循以下步骤:

Add this code in your <head></head> tags: <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> On the HTML elements that you want to have the tooltip, just add a title attribute to it. Whatever text is in the title attribute will be in the tooltip.

注意:当JavaScript被禁用时，它将回退到默认的浏览器/操作系统工具提示。