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

Question

我试图通过将鼠标悬停在另一个元素上来触发 bootstrap 工具提示出现在一个元素上。我在想，当我将鼠标悬停在我想要触发的元素上时，我可以使用 JQuery 到 addClass("hover") 到我想要显示工具提示的元素，但这似乎并没有工作是因为工具提示没有绑定到 hoer 伪 class.

我举了一个例子 - 在这个例子中，我希望工具提示出现在悬停在刷新按钮（有效）上，但也悬停在竖起大拇指按钮上：

http://jsfiddle.net/cwzzq998/

Answer 1

其中#thumbs是添加的触发器，.resetPrice是带有工具提示的元素，添加这段代码：

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

见This updated fiddle

HTH,

-泰德

Answer 2

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

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

HTML 片段示例：

   <span class="parent-tooltip">the Play Store 
        <span class="child-tooltip" title="Google applications for Android">
        <i class="fa fa-google-play"></i></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"></i></span>
    </span>

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

Triggering bootstrap tooltip by hovering over another element

twitter-bootstrap

tooltip