如何使用 jQuery 在悬停时显示工具提示消息？答案

【问题标题】：How can I display a tooltip message on hover using jQuery?如何使用 jQuery 在悬停时显示工具提示消息？
【发布时间】：2023-04-09 17:50:01
【问题描述】：

如标题所述，如何使用 jQuery 在悬停时显示工具提示消息？

【问题讨论】：

除非它是动态生成的元素或内容可能会更改的工具提示，否则我建议将title="My tooltip 属性与元素本身一起使用
请参考我已经测试过它完美无瑕：stackoverflow.com/questions/11781665/…

标签： jquery

【解决方案1】：

Tooltip 插件对于你需要的东西来说可能太重了。只需使用您希望在工具提示中显示的文本设置“标题”属性。

$("#yourElement").attr('title', 'This is the hover-over text');

【讨论】：

请注意，您也可以将工具提示直接放在 HTML 中的属性中：
这在 IE 中对我不起作用！不得不改用prop。 $("#yourElement").prop('title', 'This is the hover-over text');
嗨@psychotik。这个标题可以加粗吗？

【解决方案2】：

我建议qTip。

【讨论】：

qTip 非常重（55kb，超过一些整个 JS 框架）。请参阅psychotik 关于使用 HTML 属性的回答。但是，如果您想要轻巧漂亮的东西，请查看这个名为 PowerTip 的 JQuery 插件，它只有 12kb，即使与旧浏览器也兼容 - stevenbenner.github.com/jquery-powertip
链接不再可用

【解决方案3】：

Following 将像魅力一样工作（假设您有 div/span/table/tr/td/etc 和 "id"="myId"）

    $("#myId").hover(function() {
        $(this).css('cursor','pointer').attr('title', 'This is a hover text.');
    }, function() {
        $(this).css('cursor','auto');
    });

作为补充，.css('cursor','pointer') 将在悬停时更改鼠标指针。

【讨论】：

如何在显示的工具提示上添加样式

【解决方案4】：

看看 jQuery Tooltip plugin。您可以为不同的选项传入一个选项对象。

还有其他可用的替代工具提示插件，其中一些是

查看演示和文档，如果您对如何在代码中使用它们有具体问题，请更新您的问题。

【讨论】：

【解决方案5】：

您可以使用引导程序tooltip。不要忘记初始化它。

<span class="tooltip-r" data-toggle="tooltip" data-placement="left" title="Explanation">
inside span
</span>

将在左侧显示文字说明。

并用js运行它：

$('.tooltip-r').tooltip();

【讨论】：

【解决方案6】：

由于推荐的 qTip 和其他项目都相当老，我建议使用 qTip2，因为它是最新的。

【讨论】：

【解决方案7】：

看看ToolTipster

易于使用
灵活
相当轻巧，与其他一些工具提示插件相比 (39kB)
看起来更好，没有额外的样式
有一组很好的预定义主题

【讨论】：

【解决方案8】：

您可以只使用 css 而不使用任何 jQuiery。

<a class="tooltips">
    Hover Me
    <span>My Tooltip Text</span>
</a>
<style>
    a.tooltips {
        position: relative;
        display: inline;
    }

        a.tooltips span {
            position: absolute;
            width: 200px;
            color: #FFFFFF;
            background: #000000;
            height: 30px;
            line-height: 30px;
            text-align: center;
            visibility: hidden;
            border-radius: 6px;
        }

            a.tooltips span:after {
                content: '';
                position: absolute;
                top: 100%;
                left: 35%;
                margin-left: -8px;
                width: 0;
                height: 0;
                border-top: 8px solid #000000;
                border-right: 8px solid transparent;
                border-left: 8px solid transparent;
            }

    a:hover.tooltips span {
        visibility: visible;
        opacity: 0.8;
        bottom: 30px;
        left: 50%;
        margin-left: -76px;
        z-index: 999;
    }
</style>

【讨论】：

此答案并非旨在回答问题。

【解决方案9】：

对于最新/最新的解决方案，您可以尝试 Tippy.js，它是由 Popper 提供支持的完整的工具提示、弹出框、下拉和菜单解决方案。

Tippy.js

【讨论】：

【解决方案10】：

正如大多数答案中提到的，与这里的要求相比，插件的使用会很重。这就是为什么这里有另一种解决方案，只需使用简单的 HTML、CSS 和 JQuery 代码即可获得所需的输出。

使用 CSS 会给我们一个更好的视图，检查下面的代码

$(".tool-tip").attr('title-new', 'another example to display the hover-over texts');

button {
    background: aqua;
    padding:10px;
  } 
  .tool-tip[title-new]:hover:after {
      content: attr(title-new);
      position: absolute;
      border: #c0c0c0 1px dotted;
      padding: 10px;
      display: block;
      z-index: 100;
      background-color: #000000;
      color: #ffffff;
      max-width: 200px;
      text-decoration: none;
      text-align:center;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>hover on the button below to check the results</p>
<button class="tool-tip">Here I am</button>

【讨论】：