繁体   English   中英

悬停在工具提示上时,工具提示会闪烁

[英]Tooltip flickers while hovering on the tooltip

我在悬停在文本上时出现了一个tootlip。 由于工具提示很大,当我将光标移到工具提示上时,它开始闪烁或闪烁。 我怎么能阻止这种闪烁?

http://jsfiddle.net/keshav_1007/en5tcjaw/ - 这里是小提琴

$(function() {
    /*tooltips*/
    $('.tooltip').hide();
    $('.trigger').mouseover(function() {
        var ttLeft,
            ttTop,
            $this=$(this),
            $tip = $('#ttip'),
            triggerPos = $this.offset(),
            triggerH = $this.outerHeight(),
            triggerW = $this.outerWidth(),
            tipW = $tip.outerWidth(),
            tipH = $tip.outerHeight(),
            screenW = $(window).width(),
            scrollTop = $(document).scrollTop();

        if (triggerPos.top - tipH - scrollTop > 0 ) {
            ttTop = triggerPos.top;
        } else {
            ttTop = triggerPos.top;            
        }

        var overFlowRight = (triggerPos.left + tipW) - screenW;    
        if (overFlowRight > 0) {
            ttLeft = triggerPos.left - overFlowRight - 10;    
        } else {
            ttLeft = triggerPos.left;    
        }


        $tip
           .css({
            left : ttLeft ,
            top : ttTop,
            position: 'absolute'
            })
            .stop(true,true).fadeIn(200);
    }); // end mouseover
    $('.trigger').mouseout(function () {
        $('.tooltip').stop(true,true).fadeOut(200);
    }); // end mouseout
    });

我不希望改变工具提示的位置。 我需要在徘徊在工具提示上时停止闪烁。 怎么实现呢?

将工具提示“pointer-events”CSS属性设置为“none”。

.tooltip { 
    pointer-events: none;
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM