当悬停在工具提示上时,jQuery .tooltip()不隐藏？

Question

当我在悬停时,我正在元素中间显示一个jQuery UI工具提示.但是当悬停在工具提示上时,工具提示本身就会消失.(propagation问题)

元件:

使用工具提示:

因此,当我将工具提示本身悬停时,由于传播问题,它会消失,我想.

HTML:

<div class="bar-wrapper">
    <label class="bar-lbl active one" title="2013"><span>2013</span></label>

    <div class="bar" data-percent="90"></div>
    <div class="bar-rest-overlay" data-percent="10"></div>
</div>

<div class="bar-wrapper">
    <label class="bar-lbl active one" title="2014"><span>2014</span></label>

    <div class="bar" data-percent="80"></div>
    <div class="bar-rest-overlay" data-percent="20"></div>
</div>

当前代码:

$('.bar-lbl').tooltip(
{
    tooltipClass: 'bar-tooltip',
    position:
    {
        my: 'center',
        at: 'center'
    }
});

部分修复(但工具提示永久可见):

$('.bar-lbl').on('mouseleave',
function(e)
{
    e.stopImmediatePropagation();

}).tooltip(
{
    tooltipClass: 'bar-tooltip',
    position:
    {
        my: 'center',
        at: 'center'
    }
});

不工作:

$('body').on('hover', '.ui-tooltip',
function(e)
{
    e.stopImmediatePropagation();
});

---

更新:感谢Trevor,我找到了一个紧密的解决方案.(当悬停时,它仍然可以看到最后一个悬停的工具提示):

似乎,当徘徊在工具提示本身时,它隐藏起来.但是.bar-lbl,将鼠标悬停在元素之外,工具提示保持可见,除非我将鼠标悬停在另一个.bar-lbl元素上.

问题出on('mouseleave')在我身上.bar-lbl.我需要两条线,但它们互相干扰.(看评论)

$('.bar-lbl').on('mouseenter',
function(e)
{
    $('.bar-lbl').not($(this)).tooltip('close');   // Close all other tooltips

}).on('mouseleave',
function(e)
{
    e.stopImmediatePropagation();    // keeps tooltip visible when hovering tooltip itself
    $('.bar-lbl').tooltip('close');  // I need this, but it breaks the line above, causing the tooltip to flicker

}).tooltip(
{
    tooltipClass: 'bar-tooltip',
    position:
    {
        my: 'center',
        at: 'center'
    }
});

$('body').on('mouseleave', '.ui-tooltip',
function(e)
{
    $('.bar-lbl').tooltip('close');
});

Answer 1

只是将代码的第一部分作为参考。

$('.bar-lbl').tooltip(
    {
        tooltipClass: 'bar-tooltip',
        position:
    {
        my: 'center',
        at: 'center'
    }
});

$('.bar-lbl').on('mouseleave', function(e)
{
    e.stopImmediatePropagation();

}).tooltip(
{
    tooltipClass: 'bar-tooltip',
    position:
    {
        my: 'center',
        at: 'center'
    }
});

对于最后一部分，将不工作的部分更改为以下内容，从而关闭 上的工具提示mouseleave。

$('body').on('mouseleave', '.ui-tooltip',
function(e)
{
    $('.bar-lbl').tooltip('close');    
});