1

我有一个工具提示。它有三秒钟的超时时间。如果用户在其上输入鼠标,它应该隐藏以免打扰用户,但是在出现工具提示时,鼠标可能位于工具提示上,从而阻止它出现。所以我应该做的是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);
}
4

1 回答 1

0

最后,以这种方式解决了这个问题:

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);
}
于 2013-08-08T20:03:19.127 回答