Alexander Seredenko Alexander Seredenko - 5 months ago 38
jQuery Question

Show and hide bootstrap tooltip using javascript

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>


and Javascript:

$(".statistics .stars").click( function(){
if (! user.isLogin){
$(this).tooltip("show");

setTimeout(function(){
$(this).tooltip( 'hide' );
}, 2000);
}
});


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?

Answer

First you need to set tooltip to be manual, now it will not popup on hover

$('div').tooltip({trigger: 'manual'});

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

Here is the updated jsfiddle