2016-03-25 26 views
1

我有一個工具提示需要點擊一次後雙擊的問題。例如,我點擊tooltip1,然後點擊tooltip2,然後再次點擊tooltip1。第二次點擊tooltip1時,需要兩次點擊才能再次顯示工具提示。第一次點擊後需要雙擊的引導工具提示

總的來說,我在尋找的是一個包含4個工具提示的頁面,當我點擊一個鏈接並且每次只顯示一個工具提示時,將顯示工具提示,所以如果顯示一個工具提示,則隱藏其他3個提示。

一個例子是在https://jsfiddle.net/9656mv9w/

$(document).ready(function() { 
$('[data-toggle="tooltip"]').tooltip(); 
}); 

$(document).on('show.bs.tooltip', function() { 
$('.tooltip').not(this).hide(); 
}); 
+0

如果您閱讀Bootstrap的源代碼,您會看到大多數popover代碼使用工具提示代碼。 ('Popover'是從'Tooltip'派生的,具有一些次要的自定義)。所以問題和解決方案對於兩者都是相同的。 – Louis

回答

1

我有同樣的問題。解決方法是檢測應該關閉的show event上的任何打開的工具提示,然後觸發點擊關閉它們。

//init bootstrap tooltips 
$('[data-toggle="tooltip"]').tooltip({ 
    trigger:'click' 
}); 

//listen for the show event on any triggered elements 
$('[data-toggle="tooltip"]').on('show.bs.tooltip', function() { 

//get a reference to the current element that is showing the tooltip 
    var triggeredElement = $(this); 

    //loop through all tooltips elements 
    $('[data-toggle="tooltip"]').each(function(){ 

    //if they are not the currently triggered element and have a tooltip, 
    //trigger a click to close them 
    if($(this) !== triggeredElement && $(this).next().hasClass('tooltip')) { 
     $(this).click(); 
    } 
    }) 
}); 
+0

這工作完美。謝謝! –

相關問題