它可以只用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来计算鼠标位置，并通过改变应用于它的类将其添加到伪元素中。

您可以使用数据属性，伪元素和内容创建自定义CSS工具提示:attr()等。

http://jsfiddle.net/clintioo/gLeydk0k/11/

<div data-tooltip="This is my tooltip">
    <label>Name</label>
    <input type="text" />
</div>

.

div:hover:before {
    content: attr(data-tooltip);
    position: absolute;
    padding: 5px 10px;
    margin: -3px 0 0 180px;
    background: orange;
    color: white;
    border-radius: 3px;
}

div:hover:after {
    content: '';
    position: absolute;
    margin: 6px 0 0 3px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 10px solid orange;
    border-bottom: 5px solid transparent;
}

input[type="text"] {
    width: 125px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

仅css3的解决方案可以是:

CSS3:

div[id^="tooltip"]:after {content: attr(data-title); background: #e5e5e5; position: absolute; top: -10px; left:  0; right: 0; z-index: 1000;}

HTML5:

<div style="background: yellow;">
    <div id="tooltip-1" data-title="Tooltip Text" style="display: inline-block; position: relative; background: pink;">
        <label>Name</label>
        <input type="text" />
    </div>
</div>

然后你可以用同样的方法创建一个tooltip-2 div…当然，您也可以使用title属性而不是data属性。

试试这个。你可以这样做，只有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 >

工具提示定位纯css

div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ text-align: center; } .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; //text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } .toolLeft { top: -5px; right: 105%; } .toolRight { top: -5px; left: 105%; } .toolTop { bottom: 100%; left: 50%; margin-left: -60px; } .toolBottom { top: 100%; left: 50%; margin-left: -60px; } <div> <div class="tooltip">Top <span class="tooltiptext toolTop">Tooltip text</span></div><br /> <div class="tooltip">Left <span class="tooltiptext toolLeft">Tooltip text</span></div><br /> <div class="tooltip">Right <span class="tooltiptext toolRight">Tooltip text</span></div><br /> <div class="tooltip">Bottom <span class="tooltiptext toolBottom">Tooltip text</span></div><br /> </div>

它可以只用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来计算鼠标位置，并通过改变应用于它的类将其添加到伪元素中。