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

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

本文介绍了使用javascript显示和隐藏引导工具提示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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>

和Javascript:

and Javascript:

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

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

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

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?

推荐答案

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

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

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

此后,您需要保存div元素,然后才能在setTimeout中使用它,因为setTimeout外部的 this 与setTimeout内部的 this 不同.

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

这是更新的 jsfiddle

这篇关于使用javascript显示和隐藏引导工具提示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-13 13:37