Jquery 悬停 - 添加超时中断工具提示？

Question

我正在尝试更新我的工具提示 jquery 代码，以便当用户将鼠标移离工具提示图标时，工具提示会在他们复制文本时延迟。我尝试添加此超时，该超时在第一次单击该图标时有效，但是当再次单击该图标时，工具提示显示为空白。如果我删除超时代码，它会起作用。

工具提示在第一次点击时起作用：

第二次单击时工具提示显示为空白：

代码：

<script type="text/javascript">$(document).ready(function () {
var hoverTimeout;
// Tooltip only Text
$('.masterTooltip').hover(function () {
    // Hover over code
    clearTimeout(hoverTimeout);
    var title = $(this).attr('title');
    $(this).data('tipText', title).removeAttr('title');
    $('<p class="tooltip"></p>')
    .text(title)
    .appendTo('body')
    .fadeIn('slow');
}, function () {
    // Hover out code
    hoverTimeout = setTimeout(function () {
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
    }, 5000);
}).click(function (e) {
    var mousex = e.pageX + 20; //Get X coordinates
    var mousey = e.pageY + 10; //Get Y coordinates
    $('.tooltip')
    .css({ top: mousey, left: mousex })
});
});</script>

Answer 1

你的问题：你的第一个函数中的 $(this) 指的是 Object [ div.masterTooltip ] （我用一个 div 进行了测试，因为你的问题中没有包含任何 HTML )，但是第二个函数中的 $(this) 指的是 Object [ Window ]。这导致 data('tipText') 在第二个函数中未定义，因此没有插入 title 属性，这在第一次执行该函数后给你一个空的工具提示。

此代码应该有效：

$(document).ready(function () {
var hoverTimeout;
// Tooltip only Text
var masterTooltip = $('.masterTooltip').hover(function () {
    // Hover over code
    clearTimeout(hoverTimeout);
    var title = $(this).attr('title');
    $(this).data('tipText', title).removeAttr('title');
    $('<p class="tooltip"></p>')
    .text(title)
    .appendTo('body')
    .fadeIn('slow');
}, function () {
    // Hover out code
    hoverTimeout = setTimeout(function () {
        $(masterTooltip).attr('title', $(masterTooltip).data('tipText'));
        $('.tooltip').remove();
    }, 5000);
}).click(function (e) {
    var mousex = e.pageX + 20; //Get X coordinates
    var mousey = e.pageY + 10; //Get Y coordinates
    $('.tooltip')
    .css({ top: mousey, left: mousex })
});
});

Jquery 悬停 - 添加超时中断工具提示？

Jquery Hover Out - Adding Timeout Breaks Tooltip?

jquery

tooltip