show bootstrap tooltip on load and auto hide after few seconds

user_2912339 0
Viewed 13757
<a title="show on load" data-toggle="tooltip">Hello world</a>

 $('a').tooltip('show');

this is showing tooltip on page load, but how to hide it after few seconds?

I tried something like this,

$('a').tooltip({
   'delay': { show: 'show', hide: 3000 }
});

jsfiddle

twitter-bootstrap tooltip jquery javascript
2 Answers

Thanks to Chip Dean.

Or use this:

$(document).ready(function(){
   $('p').tooltip().mouseover();
   setTimeout(function(){ $('p').tooltip('hide'); }, 3000);
});

data-toggle

$(document).ready(function(){
   $('[data-toggle="tooltip"]').tooltip().mouseover();
   setTimeout(function(){ $('[data-toggle="tooltip"]').tooltip('hide'); }, 3000);
});

or

  // $(window).load(function(){  //  deprecated in 1.8 - removed 3.0.
$(window).on("load", function(){
    $('[data-toggle="tooltip"]').tooltip().mouseover();
    setTimeout(function(){ $('[data-toggle="tooltip"]').tooltip('hide'); }, 3000);
});

**

Show on scroll

$(document).ready(function(){
    $(window).on("scroll", function(){
       $('[data-toggle="tooltip"]').tooltip().mouseover();
       setTimeout(function(){ $('[data-toggle="tooltip"]').tooltip('hide'); }, 3000);
    });
});
user_90166160
Related