在 HTML 中的 mouseover 或悬停元素上添加文本

使用Title属性

您只需在任何 HTML 元素中添加 title 属性，鼠标悬停在文本上就会显示文本。

考虑我们有多个 HTML 元素，如下所示，这些元素可以使用属性 title 产生鼠标悬停效果

<div title="Hello hoverin' words">Div hover me</div><br/>
<p title="Hello hoverin' para">para hover me</p><br/>
<span title="Hello hoverin' span">Span hover me</span>

我们可以得到如下输出

上面的 HTML 效果只是在 HTML 元素上创建了一个鼠标悬停效果，如果你想让它看起来更漂亮，你可能必须使用其他 2 种方法，比如使用 CSS 或 Bootstrap。

使用CSS

您还可以使用 CSS 在悬停时添加工具提示或文本，考虑到您有以下 CSS，使用 :hover CSS 属性。

.hoverdiv{
  position: relative;
}

.hoverdiv > .tooltip {
  display: none;
}

.hoverdiv:hover > .tooltip {
  display: inline;
  position: absolute;
  top: 20px;
  left: 10px;
  background: red;
  border: 1px solid red;
	color:white
}

和 HTML

<div class="hoverdiv">
  <span class="hoverdiv_main">Main text</span>
  <span class="tooltip ">Text on hover</span>
</div>

输出

使用 Bootstrap 工具提示

如果您已经在项目中使用 Bootstrap，那么您可以创建外观精美的工具提示，因为 Bootstrap 使用 Popper.JS 来显示工具提示。

因此，工具提示依赖于第三方库 Popper.js 进行定位。您必须在 bootstrap.j 之前包含 popper.min.js。

但是，由于工具提示是出于性能原因而选择加入的，因此在将其与 Bootstrap 一起使用时必须对其进行初始化。

您必须包含“ data-tootltip="Some text here for tooltip"”才能将其包含在 HTML 中并显示。

初始化页面上所有工具提示的一种方法是通过其 data-toggle 属性选择它们：

$(function () {
$('[data-toggle="tooltip"]').tooltip()
})

因此，如果您有如下所示的 HTML，并在页面中引用了 Bootstrap 和 Popper.js

<div class="container">
<h3>Bootstrap tooltip Example</h3>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>

</div>
<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();   
});
</script>

它将显示鼠标悬停在具有精美输出的元素上的文本。

因此，从上述所有方法中，我想说，如果您想快速添加悬停文本而不做任何花哨的事情，请使用“标题”HTML 属性，或者如果您已经在网络中使用 Bootstrap 插件，则可以使用 Bootstrap 属性-应用。