问题描述
当用户单击元素并且条件为false时,我需要显示引导工具提示.我已经为此编写了代码:
I need to show bootstrap tooltip when user click on element and condition is false. I've written code for this:
<div data-toggle="tooltip" title="You must to log in!" class="stars">425</div>
和Javascript:
and Javascript:
$(".statistics .stars").click( function(){
if (! user.isLogin){
$(this).tooltip("show");
setTimeout(function(){
$(this).tooltip( 'hide' );
}, 2000);
}
});
当我不单击时,可以看到悬停时的默认工具提示(不需要),单击时,2秒钟后工具提示不会隐藏.如何解决这个问题?
When I don't click I can see default tooltip on hover (I don't need it) and when I click, tooltip don't hide after 2 seconds. How to solve this problems?
推荐答案
首先,您需要将工具提示设置为手动,现在它不会在悬停时弹出
First you need to set tooltip to be manual, now it will not popup on hover
$('div').tooltip({trigger: 'manual'});
此后,您需要保存div元素,然后才能在setTimeout中使用它,因为setTimeout外部的 this
与setTimeout内部的 this
不同.
After that you need to save div element before using it inside setTimeout because this
outside of setTimeout and this
inside of setTimeout is different.
$('div').click(function(){
var tt = $(this);
if (! user.isLogin){
tt.tooltip("show");
setTimeout(function(){
tt.tooltip( 'hide' );
}, 2000);
}
});
这是更新的 jsfiddle
这篇关于使用javascript显示和隐藏引导工具提示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!