只允許一個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引導工具提示實例

回答

相關問題