前端之家收集整理的这篇文章主要介绍了
当悬停在工具提示上时,jQuery .tooltip()不隐藏？，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
当我在悬停时,我正在我的元素中间显示一个jQuery UI Tooltip.但是当悬停在工具提示上时,工具提示本身就会消失. (传播问题)
元件：
使用工具提示：
因此,当我将工具提示本身悬停时,由于传播问题,它会消失,我想.
HTML：
当前代码：
$('.bar-lbl').tooltip(
{
tooltipClass: 'bar-tooltip',position:
{
my: 'center',at: 'center'
}
});
部分修复(但工具提示永久可见)：
$('.bar-lbl').on('mouseleave',function(e)
{
e.stopImmediatePropagation();
}).tooltip(
{
tooltipClass: 'bar-tooltip',at: 'center'
}
});
不工作：
$('body').on('hover','.ui-tooltip',function(e)
{
e.stopImmediatePropagation();
});
更新：感谢Trevor,我找到了一个紧密的解决方案. (当悬停时,它仍然可以看到最后一个悬停的工具提示)：
似乎,当徘徊在工具提示本身时,它隐藏起来.但是,悬停在.bar-lbl元素之外,工具提示保持可见,除非我将另一个.bar-lbl元素悬停.
问题出在我的.bar-lbl上的on(‘mouseleave’)事件中.我需要两条线,但它们互相干扰. (看评论)
$('.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',at: 'center'
}
});
$('body').on('mouseleave',function(e)
{
$('.bar-lbl').tooltip('close');
});
最佳答案
只需将
代码的第一部分作为参考即可.
$('.bar-lbl').tooltip(
{
tooltipClass: 'bar-tooltip',at: 'center'
}
});
$('.bar-lbl').on('mouseleave',at: 'center'
}
});
对于最后一部分,将不工作部分更改为以下关闭mouseleave上的工具提示.
$('body').on('mouseleave',function(e)
{
$('.bar-lbl').tooltip('close');
});
