Question

工具提示通常显示在onmouseover事件中。因此，当工具提示出现时 - 我希望在例如工具提示后将其更改为新工具提示10秒因此，每当您将鼠标光标悬停时，它会在10秒后显示工具提示1。它被改为tooltip2。然后，当您再次悬停鼠标光标时，它会再次以tooltip1开始。

或作为选项 - 只需显示一个工具提示，但10秒后......

由于

Answer 1

我肯定会建议使用jquery插件，例如tooltipster或jquery tooltip。但这样做可以满足您的需求：fiddle

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秒，以使效果更快。

Answer 2

使用计时器创建一个函数，该函数更改元素的标题，如下所示

function changeToolTip(){

    //do ajax or something to bring your new tool tip here
    document.getElementById('yourElementId').title = 'your new title';

    setTimeout(changeToolTip, 10000);
}

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

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

2 个答案: