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

时间:2015-02-09 20:14:59

标签: twitter-bootstrap tooltip

我试图通过将鼠标悬停在另一个元素上来触发引导工具提示出现在一个元素上。当我将鼠标悬停在我想要触发的元素上时,我想我可以使用JQuery将addClass("hover")用于我希望工具提示所显示的元素,但这似乎不起作用,因为tooltip与hoer伪类无关。

我做了一个例子 - 在这个例子中,我希望工具提示在鼠标悬停在刷新按钮(可行)上时显示,但也将鼠标悬停在竖起大拇指按钮上:

http://jsfiddle.net/cwzzq998/

2 个答案:

答案 0 :(得分:2)

#thumbs是添加的触发器,而.resetPrice是带有工具提示的元素,请添加以下代码:

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

请参阅This updated fiddle

HTH,

-Ted

答案 1 :(得分:0)

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

$('.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>