CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptooltip
Elyor
Elyor

Reputation: 5532

show bootstrap tooltip on load and auto hide after few seconds

<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

Upvotes: 2

Views: 16546

Answers (2)

user206
user206

Reputation: 1105

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

Upvotes: 5

Chip Dean
Chip Dean

Reputation: 4302

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

Upvotes: 9

Related Questions