通过将鼠标悬停在另一个元素上触发引导工具提示

Triggering bootstrap tooltip by hovering over another element

我试图通过将鼠标悬停在另一个元素上来触发引导工具提示以显示在一个元素上。我在想,当我将鼠标悬停在我想要触发的元素上时,我可能会使用 JQuery to addClass("hover") 到我希望在其上显示工具提示的元素,但这似乎不起作用,因为工具提示不是绑定到 hoer 伪类。

我做了一个例子——在这个例子中,我希望工具提示出现在将鼠标悬停在刷新按钮上(有效)上,但也将鼠标悬停在竖起大拇指按钮上:

http://jsfiddle.net/cwzzq998/


其中#thumbs是添加的触发器,.resetPrice是带有tooltip的元素,添加如下代码:

1
2
3
$('#thumbs').hover(
    function(e){$('.resetPrice').tooltip('toggle');}
);

查看这个更新的小提琴

HTH,

-泰德


另一种避免子元素出现意外行为的方法

1
2
3
4
$('.parent-tooltip').hover(
      function(e){$(this).find('.child-tooltip').tooltip('show');},
      function(e){$(this).find('.child-tooltip').tooltip('hide');}
    );

HTML 片段示例:

1
2
3
4
5
6
7
   <span class="parent-tooltip">the Play Store
        <span class="child-tooltip" title="Google applications for Android">
        <i class="fa fa-google-play"></span>
    </span> and <span class="parent-tooltip">the App Store
<span class="child-tooltip" title="applications Apple on IOS (iPhone)">
        <i class="fa fa-app-store-ios"></span>
    </span>