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

我做了一些事情，应该能够适应一个div以及。

HTML

<td>
    <%# (Eval("Name").ToString().Length > 65) ? Eval("Name").ToString().Substring(0, 60) + "..." : Eval("Name")%>
    <span class="showonhover">
        <a href="#"><%# (Eval("Name").ToString().Length > 65) ? "More" : "" %></a>
        <span class="hovertext">
            <%# Eval("Name") %>
        </span>
    </span>
</td>

CSS

.showonhover .hovertext { display: none;}
.showonhover:hover .hovertext {display: inline;}
a.viewdescription {color:#999;}
a.viewdescription:hover {background-color:#999; color: White;}
.hovertext {position:absolute;z-index:1000;border:1px solid #ffd971;background-color:#fffdce;padding:11px;width:150px;font-size: 0.75em;}

要了解更深入的讨论，请参阅我的文章:

一个简单的格式化工具提示文本悬停

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

<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个工具提示选项。

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

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

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

在堆栈片段中的演示

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

你可以使用纯CSS制作工具提示。试试这个。希望能帮助你解决你的问题。

HTML

<div class="tooltip"> Name
    <span class="tooltiptext">Add your tooltip text here.</span>
</div>

CSS

.tooltip {
        position: relative;
        display: inline-block;
        cursor: pointer;
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 270px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 1s;
    }

    .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

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