如何防止工具提示在鼠标上关闭



我正在使用带有DIV元素的jQuery UI Tooltip,该元素在选择时会更改其背景图像。选择也可以通过jQuery UI完成。当悬停在元素上时,工具提示如预期显示,但是当选择元素时,工具提示将在鼠标上关闭并在鼠标上重新打开,从而导致不必要的闪烁。我如何避免这种闪烁?我宁愿在关闭工具提示时不使用延迟,因为这会导致其他不必要的效果。

代码(有些简化):

$('#myDiv').tooltip({
        tooltipClass: 'myTooltip',
        track: true,
        show: null,
        hide: null,
        position: { my: "left+15 top+25", at: "right bottom" }
 });

setUpSelectable = function (id, filterType, selVar, funCB) {
    $(id).selectable({
        filter: filterType,
        selected: function (event, ui) {
            // Select new element
            if (selVar.val == null || selVar.val.attr('id') !== $(ui.selected).attr('id'))
                selVar.val = $(ui.selected);
            else { // toggle already set element.
                selVar.val.removeClass("ui-selected");
                selVar.val = null;
            }
        },
        stop: function (event, ui) {
            // Remove all the other selected elements -> no multi select
            if (selVar.val != null)
                selVar.val.siblings().removeClass("ui-selected");
            // callback
            (funCB());
        }
    });
};

CSS:

 .myTooltip { 
position: absolute;
z-index: 9999;
width: 80px;
height: 20px;
box-shadow: -3px 3px 5px;
text-shadow: 1px 1px #000000;
border-radius: 6px;
text-align:center;
color: #9F9270;
background: none repeat 0 0 rgba(0, 0, 0, 0.9);
line-height: 20px;
vertical-align:middle;
font-size: 12px;    
}

随时以编程方式打开您的初始工具:

http://api.jqueryui.com/tooltip/#method-open

$('.yourdiv').on('mousedown',function(){
   $('.yourtooltip').tooltip('open');
})

最新更新