How to delay show/hide of bootstrap-tooltips?

I am having trouble making that data-delay attribute of twitter bootstrap tooltips work. I am using it like :

Here is how i use it :

<a href="#" data-toggle="tooltip" data-delay="{ show: 5000, hide: 3000}">with delay</a>
<script>
    jQuery('a[data-toggle="tooltip"]').tooltip().click( function(e) {
        e.preventDefault(); 
    });
</script>

but i don't see any delay on show/hide. Any ideas why ?

Finally I got it working with data attribute.

data-delay='{"show":"5000", "hide":"3000"}'

The object must be surrounded by single quotes, keys with double quotes and values with double or none, probably depends on the type. Is the only way that works.

This works for popovers too.

Why can't you do it like this?

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

I prefer it this way:

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip({'delay': { show: 5000, hide: 3000 }
	});   
});

your answer doesn't work with Bootstrap 3.3.2. This one working well for my version:

data-delay='{"show":5000, "hide":3000}'

Source: https://github.com/twbs/bootstrap/issues/13874

You can use:

<div ... popover-popup-delay="2000" ...>

For use with AngularJS (UI):

<div tooltip="Hello" tooltip-popup-delay="500"></div>

Workaround!

Couldn't get it to work for my info message popover on a modal but used this workaround in my JavaScript:

$('#infoPopover').attr("data-original-title", "Delete Document");
$('#infoPopover').attr("data-content", "Success");
$('#infoPopover').popover('show');
setTimeout(function () { $('#infoPopover').popover('hide') }, 4000);

It works on an empty span...

<span id="infoPopover" data-toggle="popover"></span>

popover shows for a few seconds then hides again.

Image of popover info message on a modal