我的版本是

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

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

下面是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> .

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

最简单的方法是在包含元素上设置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>

不使用任何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');
});

你根本不需要JavaScript;只需设置title属性:

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

请注意，工具提示的可视化表示依赖于浏览器/操作系统，因此它可能会逐渐消失，也可能不会。然而，这是实现工具提示的语义方式，它可以正确地与屏幕阅读器等辅助软件一起工作。

在堆栈片段中的演示

<div title="Hello, World!"> < >标签名称> < /标签 < input type = " text " / > < / div >