只允许一个twitter引导工具提示实例

是否可以限制twitter引导工具提示以仅显示一个实例？实施例：只允许一个twitter引导工具提示实例

<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'});

的问题是，在鼠标悬停为格D3中示出所有的提示。有没有办法阻止其他工具提示出现？

来源

2013-07-31 Janusz Krawiec

我相信你想停止从DOM冒泡到其他div的显示事件。看看是否能正常工作：

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

来源

2013-07-31 23:36:34 Anchor

你的意思。对（ 'show.bs.tooltip'）？ –

'show'或'show.bs.tooltip'？没有工作... 有两种情况： 1.当鼠标移动速度很快时，鼠标悬停在d3（和停止）上的工具提示非可见（延迟），但一段时间后他们一个接一个地出现。 2.鼠标移动非常缓慢，所以当鼠标移动到d1上时，首先显示工具提示，然后在鼠标从d1→d2移动时，延迟后显示下一个工具提示 - 但第一个工具提示不会消失。然后在d3上移动，显示第三个工具提示，但其他两个不隐藏; 在这两种情况下，只有d3的工具提示应该可见... –

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

这是通过使用自举的 “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-29 17:33:27

只允许一个twitter引导工具提示实例

回答

相关问题