创建 HTML 鼠标悬停工具提示的最简单方法是什么？

Question

在不使用 JavaScript 的情况下创建 HTML 鼠标悬停工具提示的最简单、最简洁的方法是什么？

<img id=Pennstate src="/blah" style="cursor:pointer;">

将鼠标悬停在上面，会出现一个漂亮的工具提示“我们是宾夕法尼亚州立大学！”

Answer 1

最简单的方法是使用原生 HTML

title

属性:

<img src="https://stackoverflow.com/favicon.ico"
     style="cursor:pointer;"
     title="Stack Overflow">

但是如果您需要更多，请尝试自 1.9 版本以来 jQuery UI 提供的 tooltip 小部件。

Answer 2

如果您不太关心工具提示的外观，您可以随时使用“标题”属性

Answer 3

您可以使用伪元素作为工具提示，使用 css

attr()

函数从数据属性设置其内容。

[data-tooltip]:hover::after {
  display: block;
  position: absolute;
  content: attr(data-tooltip);
  border: 1px solid black;
  background: #eee;
  padding: .25em;
}

<div data-tooltip="We are Pennstate!">Pennstate</div>