304

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

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

5 回答 5

580

使用title属性，例如： 

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

或者： 

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

于 2012-06-13T20:32:04.280 回答
19

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

<a title="hover text" ng-href="{{getUrl()}}"> download link
</a>
于 2016-05-03T08:23:35.900 回答
17

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

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

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

于 2017-05-11T00:00:36.840 回答
8

您正在寻找工具提示

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

<div title="This is my tooltip">

对于更高级的 javascript 版本，您可以查看：

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

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

于 2016-10-26T12:49:08.733 回答
4

这也可以在 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>

（显然，样式可以改进）

于 2021-02-21T12:52:59.387 回答