2016-03-25 29 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

这工作完美。谢谢! –

相关问题