Question

这是否可以限制twitter bootstrap的工具提示只显示一个实例？例如：

<div class="d1" title="d1">
    <div class="d2" title="d2">
        <div class="d3" title="d3"/>
    </div>
</div>

$('.d1').tooltip({delay: {show: 1500, hide: 0}, html: true, container: '.content'});
$('.d2').tooltip({delay: {show: 1500, hide: 0}, html: true, container: '.content'});
$('.d3').tooltip({delay: {show: 1500, hide: 0}, html: true, container: '.content'});

问题是鼠标悬停在div d3上时会显示所有工具提示。有没有办法阻止其他工具提示出现？

Answer 1

我做了一个可能的工作小提琴。通过定义一个新的＆＃34; lone-tooltip＆＃34;用户可以通过隐藏所有其他工具提示来实现子元素的工具提示。

这可以通过使用bootstrap＆＃39; shown.bs.tooltip＆＃34;，它不能与＆＃34; show.bs.tooltip＆＃34; ...

一起使用

ul > li {
    position:relative;
}

演示 https://jsfiddle.net/6jkd0cto/3/

Answer 2

我相信你想阻止show事件将DOM冒泡到其他div。看看是否有效：

$('.d3').tooltip({delay: {show: 1500, hide: 0}, html: true, container: '.content'}).on('show', function(e) {
    e.stopPropagation();
});

仅允许一个twitter bootstrap工具提示实例

2 个答案: