如何防止工具提示关闭鼠标按下

时间:2014-02-01 17:47:40

标签: jquery jquery-ui jquery-ui-tooltip

我正在使用带有div元素的jquery UI工具提示,在选择时会更改其背景图像。选择也通过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;    
}

1 个答案:

答案 0 :(得分:0)

您可以通过编程方式自行打开初始工具提示:

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

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