添加悬停文本没有javascript，就像我们悬停在用户's声誉

在stackoverflow中，当我们将鼠标悬停在用户的声誉上时，我们会看到一个文本。我在很多地方看到过这种情况，源代码告诉我，它可以在没有js的情况下完成。我试过了，却只得到了这个

 <div="text">hover me</div>

html
hover

425614 次浏览

小开

最佳答案

使用title属性，例如:

<div title="them's hoverin' words">hover me</div>

or:

<span title="them's hoverin' words">hover me</span>

小开

title属性也适用于其他html元素，例如链接…

<a title="hover text" ng-href="\{\{getUrl()}}"> download link
</a>

小开

您正在寻找工具提示

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

<div title="This is my tooltip">

对于一个更花哨的javascript版本，你可以查看:

http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632

上面的链接提供了12个工具提示选项。

小开

在这种情况下，我经常使用缩写html标签。

<abbr title="Hover">Text</abbr>

https://www.w3schools.com/tags/tag_abbr.asp

小开

这也可以在CSS中完成，以获得更多的可定制性:

.hoverable {
position: relative;
}


.hoverable>.hoverable__tooltip {
display: none;
}


.hoverable:hover>.hoverable__tooltip {
display: inline;
position: absolute;
top: 1em;
left: 1em;
background: #888;
border: 1px solid black;
}

<div class="hoverable">
<span class="hoverable__main">Main text</span>
<span class="hoverable__tooltip">Hover text</span>
</div>

(显然，样式可以改进)