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

Question

悬停时，我在元素中间显示了一个jQuery UI Tooltip。但是当将鼠标悬停在它上面时，工具提示本身就会消失。 （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 元素。

问题出在我的.bar-lbl 上的on('mouseleave') 事件中。我需要两条线，但它们会相互干扰。 （见 cmets）

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

Answer 2

我就是这样处理的。您将标记类.tooltip-anchor 添加到每个应该有工具提示的元素。您还添加了 data-tooltip-content 属性，其中包含该锚的工具提示内容的选择器。最后，要选择悬停保持工具提示打开，请将.tooltip-is-hoverable 添加到锚点。该代码阻止 jQuery UI 关闭工具提示，而是管理自己的关闭计时器。

HTML：

<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>

JS：

$(() => {
  $(".tooltip-anchor").each((index, element) => {
    let $anchor = $(element),
        contentSelector = $anchor.data("tooltip-content"),
        $content = $(contentSelector).detach();

    let timeoutId = null;
    function cancelClose() {
      if (timeoutId) {
        clearTimeout(timeoutId);
        timeoutId = null;
      }
    }
    function scheduleClose() {
      cancelClose();
      timeoutId = setTimeout(() => {
        $anchor.tooltip("close");
        timeoutId = null;
      }, 250)
    }

    let tooltipOptions = {
      content: () => $content,
      // Only the tooltip anchor should get a tooltip.  If we used "*", every child tag would
      //  also get a tooltip.
      items: ".tooltip-anchor",
      position: {
        my: "center top+10",
        at: "center bottom",
        collision: "flipfit",
      },
    };
    if ($anchor.is(".tooltip-is-hoverable")) {
      $.extend(tooltipOptions, {
        open: (e) => {
          let $anchor = $(e.target),
              contentSelector = $anchor.data("tooltip-content"),
              $content = $(contentSelector),
              $tooltip = $content.closest("[role='tooltip'],.ui-tooltip");
          $tooltip.on('mouseenter', cancelClose),
          $tooltip.on('mouseleave', scheduleClose);
        },
        tooltipClass: "hoverable-tooltip",
      });

      // Prevent jquery UI from closing the tooltip of an anchor with a hoverable tooltip.
      $anchor.on('mouseleave', (e) => {
        // Instead, schedule a close.
        scheduleClose();
        e.stopImmediatePropagation();
      });
    }
    $anchor.tooltip(tooltipOptions);
  });
});

Answer 3

也许我的方法会有所帮助：

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