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

Question

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

Answer 1

工具提示插件可能对您所需的重量级太重.只需将"标题"属性设置为您希望在工具提示中显示的文本即可.

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

Answer 2

我建议使用qTip.

Answer 3

以下将像魅力一样工作(假设你有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')将在悬停时更改鼠标指针.

Answer 4

看一下jQuery Tooltip插件.您可以为不同的选项传入选项对象.

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

• Random.Next()的jQuery AJAX工具提示

• dhtml好东西AJAX工具提示

• clueTip

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

Answer 5

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

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

将在左侧显示文本说明。

并用js运行它：

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