Question

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

Answer 1

工具提示插件可能对您所需的内容过重。只需将“标题”属性设置为您希望在工具提示中显示的文字。

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

Answer 2

我建议qTip。

Answer 3

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

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

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

Answer 4

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

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

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

Answer 5

正如推荐的qTip和其他项目已经很老了，我建议使用qTip2，因为它是最新的。

Answer 6

您可以使用bootstrap tooltip。别忘了初始化它。

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

左侧将显示文字说明。

并使用js：

运行它

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

Answer 7

查看ToolTipster

易于使用
灵活
非常轻巧
看起来更好，没有额外的样式
有一套很好的预定义主题

Answer 8

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

Tippy.js

Answer 9

你可以在不使用任何jQiuery的情况下使用css来完成它。

<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>

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

9 个答案: