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

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

进一步阅读

试试这个。你可以这样做，只有css和我只添加了数据标题属性的工具提示。

.tooltip { 位置:相对; 显示:inline-block; ｝ .tooltip [data-title]:徘徊:{后 内容:attr (data-title); 填充:4px 8px; 颜色:# fff; 位置:绝对的; 左:0; 上图:110%; 空白:nowrap;} border - radius: 5 px; 背景:# 000; ｝ <div data-title="My tooltip" class="tooltip"> < >标签名称> < /标签 < input type = " text " / > < / div >

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

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

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

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

在堆栈片段中的演示

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

我的版本是

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

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