假设我有这些标签:
<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>
如何防止将鼠标悬停在 li
标记上时显示 ul
工具提示?目前,当我将鼠标悬停在 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 - Bootstrap 工具提示不调用子项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29664811/