Show and hide bootstrap tooltip using javascript

Question

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?

Almis · Accepted Answer · 2016-06-21 08:01:15Z

19

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

answered Jun 21, 2016 at 8:01

Almis

3,8292 gold badges31 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adan Sandoval Over a year ago

For future reference I want to state that if {trigger: 'manual'} doesn't do the trick then data-trigger="manual" should do

Tim Hysniu · Accepted Answer · 2016-06-21 08:01:45Z

2

This should solve your problem:

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

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

answered Jun 21, 2016 at 8:01

Tim Hysniu

1,56015 silver badges27 bronze badges

Collectives™ on Stack Overflow

Show and hide bootstrap tooltip using javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related