它可以只用CSS，不需要javascript

运行演示

[data-tooltip]:before { /* needed - do not touch */ content: attr(data-tooltip); position: absolute; opacity: 0; /* customizable */ transition: all 0.15s ease; padding: 10px; color: #333; border-radius: 10px; box-shadow: 2px 2px 1px silver; } [data-tooltip]:hover:before { /* needed - do not touch */ opacity: 1; /* customizable */ background: yellow; margin-top: -50px; margin-left: 20px; } [data-tooltip]:not([data-tooltip-persistent]):before { pointer-events: none; } /* FOR TEST PURPOSES ONLY */ div { border: 1px solid silver; background: #ddd; margin: 20px; padding: 10px; } <div>Standard div, no tooltip here</div> <div data-tooltip="Hi, I'm a tooltip. Pretty easy uh ? ;)">Div with standard tooltip. Hover me to see the tooltip. <br/>Hovering the tooltip doesn't matter: <br/>if you hover out of my boundaries, the tooltip will disappear.</div> <div data-tooltip="Hi, I'm a persistent tooltip. I won't disappear when hovering me even if out of my parent boundaries. I'll also prevent other tooltips to fire :)" data-tooltip-persistent="foo">Div with persistent tooltip. Hover me to see the tooltip. <br/>The tooltip won't expire until you hover on me OR it.</div>

Apply a custom HTML attribute, eg. data-tooltip="bla bla" to your object (div or whatever): <div data-tooltip="bla bla"> something here </div> Define the :before pseudoelement of each [data-tooltip] object to be transparent, absolutely positioned and with data-tooltip="" value as content: [data-tooltip]:before { position : absolute; content : attr(data-tooltip); opacity : 0; } Define :hover:before hovering state of each [data-tooltip] to make it visible: [data-tooltip]:hover:before { opacity : 1; } Apply your styles (color, size, position etc) to the tooltip object; end of the story.

在演示中，我定义了另一个规则来指定当鼠标悬停在工具提示上但不在父工具提示上时，工具提示是否必须消失，使用另一个自定义属性data-tooltip-persistent和一个简单的规则:

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

注1:浏览器的覆盖范围很广，但可以考虑为旧的IE使用javascript回退(如果需要的话)。

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

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

你也可以使用这个作为工具提示…它的工作原理是一样的，但你必须写额外的标签。

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

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

<div title="This is my tooltip">

如:

.visible { 高度:3他们; 宽度:10 em; 背景:黄色; } <div title="This is my tooltip" class="visible"></div> .

对于一个更花哨的javascript版本，你可以查看:

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

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

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

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

进一步阅读

不使用任何API 你也可以通过使用纯CSS和Jquery演示来做这样的事情

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