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

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>

1. 这里是 FIDDLE ，未尝试解决此问题：https://jsfiddle.net/qmskzah6/

2. 这是我尝试z-index的地方：https://jsfiddle.net/qmskzah6/1/

3. 在这里我将图像移到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

由于似乎没有“内置”选项，因此我对制作自定义解决方案感觉更好：

$( '[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次。我不确定为什么会发生这种情况，但是在反转之前添加了检查以确保它是隐藏/可见的。

注意：Zim的答案在沙盒中有效，但是我不想弄乱工具提示的初始化，也不想冒其他地方破坏工具提示的风险。我的应用很大。