7

悬停时，我在元素中间显示了一个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');
});
4

3 回答 3

5

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

$('.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');    
});
于 2013-11-08T16:34:52.953 回答
1

我就是这样处理的。.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);
  });
});
于 2019-11-14T18:01:48.297 回答
0

也许我的方法可以帮助：

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(); })
            }
        );
    }
});
于 2019-09-13T14:09:55.810 回答