Question

当我悬停时，我正在元素中间显示jQuery UI Tooltip。但是当悬停在工具提示上时，工具提示本身就会消失。（propagation问题）

元素：

enter image description here

使用工具提示：

enter image description here

因此，当我将工具提示本身悬停时，由于传播问题，我认为它会消失。

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')的{{1}}事件中。我需要两条线，但它们互相干扰。（见评论）

.bar-lbl

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');    
});

Answer 2

也许我的方法可以帮助您

let delay_time = 2000;

$elem.tooltip({
    hide: {
        delay: delay_time
    },
    close: function(event, ui) {
        ui.tooltip.hover(
            function() {
                $(this).stop(true).fadeTo(400, 1);
            },
            function() {
                $(this).delay(delay_time).fadeOut(400, function(){ $(this).remove(); })
            }
        );
    }
});

Answer 3

这就是我的处理方式。您将标记类background-image: url(/assets/images/...)添加到每个应该具有工具提示的元素。您还添加了.tooltip-anchor属性，该属性包含该锚点工具提示内容的选择器。最后，要选择悬停以使工具提示保持打开状态，请将data-tooltip-content添加到锚点。该代码可防止jQuery UI关闭工具提示，而是管理自己的关闭计时器。

HTML：

.tooltip-is-hoverable

JS：

<span class="tooltip-anchor tooltip-is-hoverable"
      data-tooltip-content="#my-tooltip-content"
      >
  this has a tooltip <span>(this inner span won't have a second tooltip)</span>
</span>
<div id="my-tooltip-content">
  When your tooltips don't vanish:
  <a href="https://www.google.com/search?q=be+happy">you might feel</a>.
</div>

当悬停在工具提示上时，jQuery .tooltip（）不隐藏？

3 个答案: