Question

我有一个有标题的html元素 title ="This is a tooltip"和我的班级class="tooltips"。

在我的script.js中是以下代码（仅用于演示我的问题）：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

实际发生的事情：第一次它的工作效果如何，但如果我第二次将元素悬停，工具提示会立即显示并在延迟两秒后消失。似乎第一个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>

应该做的伎俩

Answer 2

尝试在重新初始化之前使用clearTimeout清除超时，如

var that = $(this);
if(timeout){
    clearTimeout(timeout);
}
timeout = setTimeout(function(){

问题更新后，您只需使用destroy代替hide tooltip，而无需使用clearTimeout。这是因为一旦创建了工具提示，那么下次当你的mouseenter在链接上它将显示并隐藏而没有任何延迟，而setTimeout没有用。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Bootstrap工具提示在第二次鼠标悬停时显示

2 个答案: