Tooltips - how to set show and hide delays on every tooltip using JS?

Bootstrap Studio Help
1

Hi forum,

I’ve got a page with many tooltips. What I’m trying to achieve is setting all the tooltips on the page to show at 500ms and hide at 100ms

I found that I can add the key value pair to each individual input, however, the single value (500 in this case) is applied to both show and hide.

<div class="input-group"><span class="input-group-text" data-bs-toggle="tooltip" data-bss-tooltip="" data-bs-delay="500" data-bs-original-title="This is an example">Example</span><input class="form-control" type="text" name="example" required=""></div>

So not only does this require setting the key value pair for each Indvidual form element, it also doesn’t achieve being able to set different values for the show and hide events.

There must be a way to do this using javascript for the entire page. Right?

I found this snippet in another forum that was, I believe, trying to address my scenario as well.
However, I’m not able to get it to work:

var tooltipTriggerList = .slice.call(document.querySelectorAll(‘[data-bs-toggle=“tooltip”]’))
var tooltipList = tooltipTriggerList.map
(function(tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl,{delay: { “show”: 500, “hide”: 100 }});
})

It’s based on the documentation for BS here: Tooltips · Bootstrap v5.0

It’s failing in the tooltipTriggerEl function, but I’m not seeing where or why.

Any ideas or suggestions?

Thanks.

2

You can add it as an object to the data-bs-delay={"show":500,"hide":100}

tooltip

3 Likes
3

You can change your script to this and it will work

document.addEventListener(
  'DOMContentLoaded',
  function () {
    const tooltipTriggerList = [].slice.call(
      document.querySelectorAll('[data-bss-tooltip]')
    );
    const tooltipList = tooltipTriggerList.map((tooltipTriggerEl) => {
      return new bootstrap.Tooltip(tooltipTriggerEl, {
        delay: {
          show: 500,
          hide: 100,
        },
      });
    });
  },
  false
);
2 Likes
4

I swear I tried that before :joy: Must of had a typo somewhere. Anyway, this is good FYI.

Many thanks!

5

This works great! Exactly what I was trying to accomplish.

I’m grateful for your help here.

6

In the config object in your script you can add more properties like a custonClass to customize the tooltip to your theme colors

Here is an example with custom tooltip and dynamic content

7

Perfect timing! I was just looking around for a way to stylize the tooltips beyond the defaults.

This example, and another that you posted a while back Styling the Tooltip Window possible? - #2 by kuligaposten has helped me to not only change the background color on every tooltip on a page (to match the site color scheme), but also how to italicize a portion of the title using the data-bs-html=“true” data attribute.

Great stuff!

Thanks again.

8

If I use the javascript for every tooltip on a page, is there a way to override a individual tooltip to have a different hide?

Using the JS you provided in this response, I also tried to override one tooltip using the object’s attribute like this: data-bs-delay={“show”:500,“hide”:3000}

However, it doesn’t work, I’m thinking because the JS overrides that attempt at an override.

Is there a way to do this, override (or make different) a single objects attribute vs JS for the rest of the page?

9

I shared a component in the online library
search for Custom Tooltip we5inelgr