如何使用jQuery在悬停上显示工具提示信息?

As the title states, how can I display a tooltip message on hover using jQuery?

正如标题所述，如何使用jQuery显示鼠标悬停的工具提示消息?

8 个解决方案

#1

I suggest qTip.

我建议qTip。

#2

144

Tooltip plugin might be too heavyweight for what you need. Simply set the 'title' attribute with the text you desire to show in your tooltip.

工具提示插件对于您需要的东西来说可能太重量级了。只需将“title”属性设置为您希望在工具提示中显示的文本。

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

#3

take a look at the jQuery Tooltip plugin. You can pass in an options object for different options.

看看jQuery工具提示插件。您可以为不同的选项传递一个options对象。

There are also other alternative tooltip plugins available, of which a few are

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

Random.Next()'s jQuery AJAX tooltip

Random.Next()的jQuery AJAX工具提示
dhtml goodies AJAX tooltip

dhtml好吃的AJAX工具提示
clueTip

clueTip

Take look at the demos and documentation and please update your question if you have specific questions about how to use them in your code.

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

#4

Following will work like a charm (assuming you have div/span/table/tr/td/etc with "id"="myId")

下面的内容将会非常有用(假设您有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');
    });

As a complimentary, .css('cursor','pointer') will change the mouse pointer on hover.

作为一个补充，.css('光标'，'指针')将改变鼠标悬停的指针。

#5

As recommended qTip and other projects are quite old I recommend using qTip2 as it is most up-to-date.

正如推荐的qTip和其他项目一样，我推荐使用qTip2，因为它是最新的。

#6

You can use bootstrap tooltip. Do not forget to initialize it.

您可以使用引导工具提示。不要忘记初始化它。

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

Will be shown text Explanation on the left side.

将在左边显示文本解释。

and run it with js:

用js运行:

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

#7

Take a look at ToolTipster

看一下ToolTipster。

easy to use
易于使用的
flexible
灵活的
pretty lightweight, compared to some other tooltip plugins (39kB)
与其他一些工具提示插件相比，它非常轻量级(39kB)
looks better, without additional styling
看起来更好，没有额外的样式
has a good set of predefined themes
有一组好的预定义主题?

#8

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

#1