Tooltipster在第二次悬停时延迟3秒后显示

时间:2016-02-16 12:38:54

标签: jquery callback hover tooltip tooltipster

  

我希望在第二次悬停后延迟一段时间后显示tooltipster tooltip

不知何故,我设法在第二次悬停时禁用tooltip。但是我希望在第二次悬停时显示工具提示但是经过一段时间的延迟。

find fiddle demo

这是代码:

$('.tooltip').each(function(){
    var pos = $(this).attr('data-position');
    //var hvr = $(this).hover();

    $(this).tooltipster({
        contentAsHTML: true,
        maxWidth: 200,
        position: 'right', 
        speed: 150,
        arrow:false,
        multiple: true,
        positionTracker:true,
        onlyOne: true,
        trigger:'hover',
        offsetX:-25,
        offsetY:-80,
        //theme: '.onlyforcategory',
    });

});

$('.tooltip').mouseleave(function(){
    $(this).tooltipster('disable');
});

$('.tooltip').hover(function(){
    //setTimeout(function(){ $(this).tooltipster('enable');}, 2000);
});

1 个答案:

答案 0 :(得分:0)

对工具提示类元素上的鼠标悬停事件应用工具提示器,这些元素尚未工具化并且打开它。工具提示将立即打开。

在工具提示设置中,定义触发器:' hover' 延迟:3000 。 tooltipster将在此之后(从第二个悬停)打开悬停事件3s延迟的工具箱。

  var tooltipInstance;
        $("body").on('mouseover', '.tooltip:not(.tooltipstered)', function(){
            var pos = $(this).attr('data-position');
            //var hvr = $(this).hover();
            tooltipInstance = $(this).tooltipster({
                trigger: 'hover',
                delay: 3000,
                contentAsHTML: true,
                maxWidth: 200,
                position: 'right',
                speed: 150,
                arrow:false,
                multiple: true,
                positionTracker:true,
                onlyOne: true,
                trigger:'hover',
                offsetX:-25,
                offsetY:-80,
                //theme: '.onlyforcategory',
            });
            tooltipInstance.tooltipster('open');
         });