CODEWITHSUNDEEP
jquerytwitter-bootstrap
Spyros
Spyros

Reputation: 48636

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 ?

Upvotes: 68

Views: 58013

Answers (10)

Rob K.
Rob K.

Reputation: 691

Ran into this issue with an Asp.Net MVC application that some how was bringing in Boostrap 5.1 and 5.2 versions of the libraries together. Ran into a Type error. However if you're looking to set your delay for the whole site, I found using the tooltip initializer to be the best way to go. Works with Bootstrap 5.2.3 in my case (not tested on other versions).

Site.js - Javascript file used by entire site.

    //bootstrap tool tip initializer - placed as the first lines of code to execute via site.js
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')

    
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl, {
        container: tooltipTriggerEl.parentElement,
        popperConfig: {
            strategy: 'absolute',
        },
        delay: { "show": 750, "hide": 0 },
    }))

Example HTML

<button id="sample-button-id" type="button" class="btn btn-outline-dark shadow-none"
data-bs-toggle="tooltip" data-bs-placement="top" 
data-bs-custom-class="custom-tooltip" data-bs-trigger="hover"
data-bs-title="Sample tooltip text.">
   Example Text
</button>

Note:

container: is for Bootstrap/Popper tooltip configuration in my situation.

popperConfig: is for Bootstrap/Popper tooltip configuration in my situation.

Both container and popperConfig were configurations I needed to ensure a tooltip didn't flow away from the element it was attached to.

Upvotes: 1

besil
besil

Reputation: 1379

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}'

Upvotes: 1

Karl Humphries
Karl Humphries

Reputation: 328

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"

Upvotes: 1

Davey
Davey

Reputation: 61

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

Upvotes: 0

Pascal
Pascal

Reputation: 59

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

Upvotes: 4

Ikhlak S.
Ikhlak S.

Reputation: 9034

I prefer it this way:

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

Upvotes: 5

Jeffrey Roosendaal
Jeffrey Roosendaal

Reputation: 7157

For use with AngularJS (UI):

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

Upvotes: 0

devsathish
devsathish

Reputation: 2409

You can use:

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

Upvotes: 0

GautamD31
GautamD31

Reputation: 28763

Why can't you do it like this?

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

Upvotes: 31

aze&#243;s
aze&#243;s

Reputation: 4901

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.

Upvotes: 131

Related Questions