1

这是否可以将 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 上时会显示所有工具提示。有没有办法阻止其他工具提示出现？

4

2 回答 2

2

我做了一个可能的解决方法。通过定义一个新的“单独的工具提示”，用户可以通过隐藏所有其他工具提示来实现子元素的工具提示单独显示。

这通过使用引导程序的“shown.bs.tooltip”工作，它不适用于“show.bs.tooltip”......

$('[data-toggle="tooltip"]').tooltip({
    container:'body',
})
$('[data-toggle="lone-tooltip"]').tooltip({
    container:'body'
})

$('[data-toggle="lone-tooltip"]').on('shown.bs.tooltip',function(e){
    $('[data-toggle="tooltip"]').not(this).tooltip('hide');
});

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

于 2015-04-29T17:33:27.347 回答
0

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

$('.d3').tooltip({delay: {show: 1500, hide: 0}, html: true, container: '.content'}).on('show', function(e) {
    e.stopPropagation();
});
于 2013-07-31T23:36:34.343 回答