Question

我有一个工具提示。超时时间为3秒。如果用户在其上输入鼠标，则应该隐藏不要惹恼用户，但是在出现工具提示时，鼠标可能位于工具提示上，导致其无法显示。所以我应该做的是在一秒钟后设置mouseenter。如果我在setTimeout中设置它，事件似乎无效。那么如何修改我的代码？

http://jsfiddle.net/ZFSWj/2/

HTML

<div id="mytooltip" title="the message"></div>
<button id="mybutton">run tooltip</button>

JS

$(function () {
    $('#mybutton').on('click', function (event) {
        runtooltip();
    });
});

function runtooltip() {
    $('#mytooltip').tooltip();
    $('#mytooltip').tooltip('open');
    // after 3 sec close tooltip
    setTimeout(function () {
        $('#mytooltip').tooltip('close');
        $('#mytooltip').tooltip("destroy");
    }, 3000);
    // after 1 sec set event handler
    $('#mytooltip').off('mouseenter');
    setTimeout(function () {
        $("#mytooltip").on('mouseenter', function (event) {
            $('#mytooltip').tooltip('close');
        });
    }, 1000);
}

Answer 1

最后，用这种方式解决了这个问题：

http://jsfiddle.net/ZFSWj/6/

$(function() {
$('#mybutton').on('click',function(event){runtooltip();});
});

function runtooltip()
{
$('#mytooltip').off('mouseenter');
$('#mytooltip').tooltip({
    open: function(e,o){
        $(o.tooltip).mouseenter(function(e){
            setTimeout(function(){
            $('#mytooltip').tooltip('close');
                },500);
        });
    }
});
$('#mytooltip').tooltip('open');

// after 3 sec close tooltip
setTimeout(function(){$('#mytooltip').tooltip('close');$('#mytooltip').tooltip( "destroy" ); },3000);
}

jquery在setTimeout中设置事件

1 个答案: