悬停内部对象时如何删除工具提示？

Question

我有一个外部 div，里面有一个图像，两者都有工具提示。单击任一元素执行不同的操作：

单击外部 div，选择图像。
单击内部 img，打开图像。

我想区分操作，所以当图像悬停时，外部工具提示不显示。

这是html：

<div class="outer-tip"  title="SELECT image"  data-toggle="tooltip">
  <a class="inner-tip"  title="OPEN image"    data-toggle="tooltip">
    <img src="...">
  </a>
</div>

这里有一个 FIDDLE 没有尝试解决这个问题：https://jsfiddle.net/qmskzah6/
这是我尝试 z-index 的地方：https://jsfiddle.net/qmskzah6/1/
这是我将图像移到 div 之外的地方：https://jsfiddle.net/qmskzah6/2/

3 最接近我想要的，但是如果您添加更多图像，它会变得卡顿，如下所示：https://jsfiddle.net/qmskzah6/3/

我可能会设法找到可行的方法，但我想知道是否有内置或更优雅的方法来做到这一点？

Answer 1

使用container选项...

$('[data-toggle="tooltip"]').tooltip({container:'.outer-tip'});

然后添加 CSS 以在悬停内部工具提示时隐藏外部工具提示。

.inner-tip:hover + .tooltip {
   display:none !important;
}

https://www.codeply.com/go/eJOvE5qRdU

Answer 2

因为似乎没有 'built-in' 选项，所以我觉得制作自定义解决方案更好：

$( '[data-toggle="tooltip"] [data-toggle="tooltip"]' ).hover( 
    e => { // mouseIn
        var t = $( e.target ).parents( '[data-toggle="tooltip"]' ).siblings('.tooltip');
        if( t.is( ':visible' ) )
            t.hide(  );
    }, 
    e => { // mouseOut
        var t = $( e.target ).parents( '[data-toggle="tooltip"]' ).siblings('.tooltip');
        if( t.is( ':hidden' ) )
            t.show(  );
    }
);

我会逐行解释解决方案：

$( '[data-toggle="tooltip"] [data-toggle="tooltip"]...

1。这个选择器确保我们只针对嵌套的工具提示。

e => { // mouseIn

2。对于鼠标进出事件，我们需要不同的函数。也许有更有效的方法来做到这一点，但我认为这提高了可读性。

var t = $( e.target ).parents...

3。最初，我只是在这个父元素上执行 show/hide，但它有一个副作用：从内部工具提示元素移回外部工具提示导致外部工具提示仅闪烁一次，然后再次隐藏，直到下一个悬停。我创建了 t 变量，因为它会被多次使用。

if( t.is( ':visible' ) )

4。记录 mouseIn/Out 事件表明它们在每个事件中被调用了 3 次。我不确定为什么会这样，但是添加检查以确保它是 hidden/visible - 在撤销它之前 - 解决了这个问题。

注意：Zim 的答案在沙箱中有效，但我不想弄乱工具提示 init 并冒着在其他地方破坏工具提示的风险。我的应用程序非常大。

悬停内部对象时如何删除工具提示？

How to remove tooltip when hovering an inner object?

twitter-bootstrap

twitter-bootstrap-tooltip