jquery - 引导工具提示不调用子级

假设我有以下标签:

<ul data-toggle="tooltip" data-title="hello world">
    <li data-toggle="tooltip" data-title="content 1">content 1</li>
    <li data-toggle="tooltip" data-title="content 2">content 2</li>
    <li data-toggle="tooltip" data-title="content 3">content 3</li>
</ul>

将鼠标悬停在ul标记上时，如何防止显示li的工具提示？目前，当我将鼠标悬停在li上时，两个工具提示都显示出来。

最佳答案

这取决于大小写，但是您可以使用tooltip methods:

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

$('li').hover(
  function () {
    $('ul').tooltip('hide');
}, function () {
    $('ul').tooltip('show');
});

body { padding-top: 50px }
ul {
    padding: 20px;
    background: red;
}
li {
    padding: 20px;
    background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<ul data-toggle="tooltip" data-title="hello world">
    <li data-toggle="tooltip" data-title="content 1">content 1</li>
    <li data-toggle="tooltip" data-title="content 2">content 2</li>
    <li data-toggle="tooltip" data-title="content 3">content 3</li>
</ul>

关于jquery - 引导工具提示不调用子级，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29664811/