你可以用title。它几乎适用于所有事情

<div title="非常适合通过合作结交新朋友。">

<input script=JavaScript type=button title="Click for a compliment" onclick="窗口。alert(“你的头发让我想起了草原上的日落”)”value=“让你快乐”>

<table title="为理解我感受的人工作真是太棒了">

只要想到任何可以在HTML窗口中可见的标签，并在标签中插入title=“whatever tooltip you'd like”，你就得到了一个工具提示。

我开发了三种类型的褪色效果:

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

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

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

进一步阅读

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

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

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

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

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

在堆栈片段中的演示

<div title="Hello, World!"> < >标签名称> < /标签 < input type = " text " / > < / 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');
});