show bootstrap tooltip on load and auto hide after few seconds

Question

<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

Solution 1

The delay actually affects the delay of the tooltip displaying by the selected trigger method, which by default is hover. You would need to set the trigger as manual, then you can trigger it on the page load and set a timeout that will hide in later. Something like this should work:

$('p').tooltip({
   trigger: 'manual'
});
$(document).ready(function() {
    $('p').tooltip('show');
    setTimeout(function(){ $('p').tooltip('hide'); }, 3000);
});

See the docs here for more info: http://getbootstrap.com/javascript/#tooltips

Solution 2

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