CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Ef Ge
Ef Ge

Reputation: 818

Bootstrap tooltip shown instant at second mouseover

I have a html-element which has a title title ="This is a tooltip" and my class class="tooltips".

In my script.js is the following code (just for demonstration of my problem):

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>

What it should do: If I enter the element with my pointer, it should happen nothing. After a delay of a second, the tooltip should appear and after another second, the tooltip should disappear.

What actually happens: The first time it worked how expected, but if I hover the element the second time, the tooltip appears instantly and disappears after two seconds delay. It seems that the first tooltip('show') enables the tooltip for appearing on mouseover.

How can I make it work?

Upvotes: 1

Views: 1948

Answers (2)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try to clear timeout using clearTimeout before re-initializing it like,

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

After the question is updated, you just need to use destroy instead of hide the tooltip and no need to use clearTimeout. It is because once the tooltip is created then on next time when your mouseenter on link it will show and hide without any delay and the setTimeout is not useful.

var timeout;
$('.tooltips').mouseenter(function(){
  var that = $(this);
  timeout = setTimeout(function(){
    that.tooltip('show');
    setTimeout(function(){
      that.tooltip('destroy');
    }, 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>

Upvotes: 0

Ef Ge
Ef Ge

Reputation: 818

I have a solution for this problem. It seems like that

.tooltip('show')

is enabling tooltips for this element, so any follwing hovering will display the tooltip. 

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>

should do the trick

Upvotes: 4

Related Questions