65

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 ?

9 Answers 9

129

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.

6
  • 8
    The data-delay attribute appears to be in JSON format, which is why you evidently have to double quote the key name. FYI, you do not have to quote the integers values if you don't want, e.g. data-delay='{"show": 100, "hide": 1000}' May 12, 2014 at 17:38
  • 8
    data-delay='{"show": 100, "hide": 1000}' and data-delay='{"show":"5000", "hide":"3000"}' aren't doing anything for me. Has this worked for anyone else?
    – Ian Steffy
    Nov 20, 2014 at 21:09
  • Confirmed, doesn't work here either, Bootstrap 3.3.4
    – bart
    Jul 22, 2015 at 7:44
  • 1
    Not working with B5. See stackoverflow.com/questions/72695891/….
    – isherwood
    Jun 21, 2022 at 14:28
  • 2
    On B5 just add "bs" like other attribute: data-bs-delay='{"show":"5000", "hide":"3000"}', it works for me
    – redystum
    Jul 28, 2022 at 13:48
30

Why can't you do it like this?

$('a').tooltip({
     'delay': { show: 5000, hide: 3000 }
});
11
  • it gives me an unexpected token : error for some reason, probably an error in the syntax or so.
    – Spyros
    Mar 2, 2013 at 5:30
  • 8
    This does work, but it doesn't answer the original question of how to get it working with the data attribute.
    – Pepper
    Feb 23, 2014 at 19:23
  • @Pepper actually he did'nt mentioned that he need to wrok with data attribute.right..?
    – GautamD31
    Feb 24, 2014 at 4:25
  • @Gautam3164 the title says Data delay, and he says that is having trouble on making data-delay attribute work. So it kinda mention that he wants to use data attribute.
    – azeós
    Feb 28, 2014 at 2:57
  • @azeós but i don't see any delay on show/hide can you see this.It is not working for him.That's why I have given the ans...He also accepted it even..But its not that bad to down it
    – GautamD31
    Feb 28, 2014 at 5:02
5

I prefer it this way:

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip({'delay': { show: 5000, hide: 3000 }
    });   
});
2
  • I like that since you need the js function anyway, can make a good argument for just putting all or most of the config in one place. Aug 31, 2018 at 15:51
  • When I use Javascript delay: { "show": 500, "hide": 0 } it's not working in Andriod chrome Sep 23, 2020 at 13:25
4

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

1

If you want to delay the show and hide for the same amount of time you can just add this when using BS5

data-bs-delay="500"
0

You can use:

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

For use with AngularJS (UI):

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

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

0

For anyone stumbling here after September 2023 or using Bootstrap 5.2+, the data-tooltip works but I didn't manage to change the show or hide with the provided answer.

To make it work, follow the documentation:

data-bs-toggle="tooltip" data-bs-title="My tooltip" data-bs-delay='{"show":0,"hide":150}'

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.