使用 javascript 显示和隐藏引导工具提示答案

【问题标题】：Show and hide bootstrap tooltip using javascript使用 javascript 显示和隐藏引导工具提示
【发布时间】：2016-06-21 16:01:45
【问题描述】：

当用户点击元素并且条件为假时，我需要显示引导工具提示。我为此编写了代码：

<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 秒后隐藏。如何解决这个问题？

【问题讨论】：

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

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

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

之后，您需要先保存 div 元素，然后在 setTimeout 中使用它，因为 setTimeout 之外的 this 和 setTimeout 内部的 this 是不同的。

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

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

这是更新后的jsfiddle

【讨论】：

为了将来的参考，我想声明如果 {trigger: 'manual'} 不能解决问题，那么 data-trigger="manual" 应该可以

【解决方案2】：

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

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

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

【讨论】：