使用 JavaScript 显示和隐藏 Bootstrap 工具提示

Question

当用户单击元素并且条件为假时，我需要显示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秒后隐藏。如何解决这些问题？

- Alexander Seredenko

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

- Almis

---

为了以后的参考，我想声明如果{trigger: 'manual'}无法解决问题，那么data-trigger="manual"应该可以。 - Adan Sandoval

Answer 2

这应该可以解决你的问题：

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

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

- Tim Hysniu