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

Question

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

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

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

Answer 1

您可以使用伪元素作为工具提示，使用 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>

Answer 2

现代方法（≥ 2024 年）是使用 Popover API。由于它目前不支持将悬停作为触发器，因此我们需要一些 JavaScript 来使其工作。弹出窗口通常是为对话框/模态设计的，但我们可以利用anchor规则（更多信息请参见：https://developer.chrome.com/blog/introducing-popover-api#anchor_positioning) 将其定位在触发器顶部 按钮。

const popover = document.querySelectorAll("[popovertarget][data-trigger='hover']");

popover.forEach((e) => {
  const target = document.querySelector("#" + e.getAttribute("popovertarget"));
  e.addEventListener("mouseover",()=>{
    target.showPopover();
  });
  
  e.addEventListener("mouseout",()=>{
    target.hidePopover();
  });
});

body {
  height: 10rem;
  display: grid;
  place-items: center;
}

.tooltip {
  bottom: anchor(bottom);
  translate: 0 80%;
  border-radius: 0.5rem;
}

<button id="tip-anchor" popovertarget="fun-fact" data-trigger="hover">ℹ️</button>

<div popover anchor="tip-anchor" id="fun-fact" class="tooltip">The narwahl tusk develops from a tooth!</div>

Answer 3

这是最简单的...现在所有浏览器似乎都有工具提示，因此它们可以直接从 HTML 进行解释：

      <span title={timezoneOffset} data-toggle="tooltip">
        {timeZoneAbbreviation}
      </span>

• 标题：工具提示文本
• 数据切换：告诉浏览器要做什么
  与它

Answer 4

这不是官方方法，但它可以通过包装所需的内容来减轻为工具提示编写额外代码的负担
缩写缩写标签内的元素

<abbr title="this is a tool tip">
 <div> any content....<div/>
<abbr/>

Answer 5

最简单的方法是使用原生 HTML 标题属性：

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

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

Answer 6

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