使用javascript显示和隐藏bootstrap工具提示

Question

当用户点击元素并且条件为false时,我需要显示bootstrap工具提示.我为此编写了代码:

<div data-toggle="tooltip" title="You must to log in!" class="stars">425</div>

和Javascript:

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

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

当我没有点击时,我可以看到悬停时的默认工具提示(我不需要它),当我点击时,工具提示在2秒后不会隐藏.如何解决这个问题？

Answer 1

首先,您需要将工具提示设置为手动,现在它不会在悬停时弹出

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

之后,您需要在setTimeout中使用之前保存div元素,因为在setTimeout this之外和setTimeout之this内是不同的.

$('div').click(function(){
  var tt = $(this);
  if (! user.isLogin){
    tt.tooltip("show");

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

这是更新的jsfiddle