javascript - Bootstrap 工具提示在第二次鼠标悬停时立即显示

Question

我有一个带有标题的 html 元素 title ="This is a tooltip" 和我的类(class) class="tooltips"。

在我的 script.js 中有以下代码(仅用于演示我的问题):

var timeout;
$('.tooltips').mouseenter(function(){
  var that = $(this);
  if(timeout){
     clearTimeout(timeout); 
   }
  timeout = setTimeout(function(){
    that.tooltip('show');
    setTimeout(function(){
      that.tooltip('hide');
    }, 1000);
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<br />
<br />
<a href="#" title="I am a tooltip" class="tooltips">Hover me</a>

它应该做什么: 如果我用我的指针输入元素，它应该什么也不会发生。延迟一秒后，工具提示应出现，再过一秒，工具提示应消失。

实际发生了什么: 第一次它按预期工作，但如果我第二次悬停该元素，工具提示会立即出现并在延迟两秒后消失。似乎第一个 tooltip('show') 启用了在鼠标悬停时显示的工具提示。

我怎样才能让它发挥作用？

Answer 1

我有解决这个问题的办法。 好像是这样

.tooltip('show') 

正在为此元素启用工具提示，因此任何后续悬停都会显示工具提示。

var timeout;
$('.tooltips').mouseenter(function(){
  var that = $(this);
  if(timeout){
     clearTimeout(timeout); 
   }
  timeout = setTimeout(function(){
    that.tooltip('enable');
    that.tooltip('show');
    setTimeout(function(){
      that.tooltip('disable');
    }, 1000);
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<br />
<br />
<a href="#" title="I am a tooltip" class="tooltips">Hover me</a>

应该可以解决问题