如何更改已显示的工具提示

How to change already shown tooltip?

本文关键字：工具提示 显示 何更改      更新时间：2023-09-26

工具提示通常显示在mouseover事件上。所以当工具提示出现时，我想在10秒后将其更改为新的。因此，每次你将鼠标悬停在它上时，它都会显示tooltip1，然后在10秒内，它就会变为tooltip2。然后，当您再次悬停鼠标光标时，它将再次以tooltip1开始。

或者作为一个选项-只显示一个工具提示，但在10秒后。。。

感谢

我绝对建议使用jquery插件，如tooltipster或jquery工具提示。但这种方式正是你想要的：小提琴

html:

<div class="tooltip-change" title="title 1">Hover over me</div>

js:

$(document).ready(function () {
    $('.tooltip-change').on('mouseover', function () {
        setTimeout(function () {
            $('.tooltip-change').attr('title', 'title 2');
        }, 5000);
    });
    $('.tooltip-change').on('mouseout', function () {
        $('.tooltip-change').attr('title', 'title 1');
    });
});

唯一的问题是，除非将光标移到html元素上，否则本机标题工具提示不会更新其显示。标题在5秒后更改，而不是10秒，以使效果更快。

创建一个带有计时器的函数，该函数将元素的标题更改为

function changeToolTip(){
    //do ajax or something to bring your new tool tip here
    document.getElementById('yourElementId').title = 'your new title';
    setTimeout(changeToolTip, 10000);
}

现在在脚本中调用此代码一次，它将被调用以每10秒更改一次标题。

相关文章：