Tooltip customClass function does not update if trigger's class changes while visible

[thalesmaoanz]

Hello,

I'm using the tooltip's customClass option as a function to dynamically style the tooltip based on the trigger element's class. I've found a potential race condition when the trigger's classes are updated frequently.

My initialization code looks like this:

new bootstrap.Tooltip(element, {
    html: true,
    placement: 'auto',
    customClass: () => {
        // This function sets the tooltip's class based on the trigger's class
        return element.classList.contains('has-error') ? 'tooltip-error' : '';
    }
    // ... title function, etc.
});

The Bug / Race Condition:

1. A .has-error class is added to the trigger element by my script (e.g., from a WebSocket message).
2. I hover over the element. The tooltip correctly appears with the .tooltip-error class.
3. While the tooltip is still visible, my script receives another message and removes the .has-error class from the trigger element.
4. Result: The tooltip remains styled with .tooltip-error (e.g., red background) even though the trigger element no longer has the .has-error class. The tooltip is showing a stale state.

Expected behavior: The tooltip's style should reflect the current state of the trigger element.

Question: Is this the intended behavior, or should the tooltip instance react to class changes on its trigger element while it is visible?

Thank you!

[James4David]

By design, the customClass option in Bootstrap is only evaluated when the tooltip is created/shown, not continuously while it’s visible. That’s why you’re seeing the “stale” state — the function isn’t re-invoked just because your trigger element’s classes changed after the tooltip was already open.

Why this happens

On mouseenter/focus, Bootstrap calls your customClass function and applies the result to the tooltip element.

Once rendered, the tooltip’s DOM is independent — it won’t automatically re-sync with changes to the trigger element unless you explicitly tell it to.

Options to keep it in sync

Force a refresh
If your trigger’s state changes while the tooltip is visible, you can call:

tooltipInstance.update();

or hide/show it again:

tooltipInstance.hide();
tooltipInstance.show();

That re-evaluates customClass().

Use a MutationObserver
Watch for class changes on the trigger and refresh the tooltip if needed:

const observer = new MutationObserver(() => tooltipInstance.update());
observer.observe(element, { attributes: true, attributeFilter: ['class'] });

Manual toggling
Instead of relying on customClass, toggle a CSS class directly on the tooltip DOM (.tooltip) in your own event handlers when the trigger changes.

[thalesmaoanz]

Hi @James4David,

Thanks for your reply. I think I might be using the wrong approach because my tooltip's options are only being evaluated once on initialization, not every time the tooltip is shown.

My goal is for the customClass and title to be dynamic. For instance, if the has-error class is added to the trigger element after the page loads, I expect the tooltip to have the tooltip-error class the next time it's hovered. However, the functions only run once when the script first loads.

Here is my code:

const tooltipTriggerList = document.querySelectorAll('.svg-container .showTooltip');

    tooltipTriggerList.forEach(tooltipTriggerEl => {
        const tooltip = new bootstrap.Tooltip(tooltipTriggerEl, {
            html: true,
            placement: 'auto',
            container: 'body',
            trigger: 'hover', 
            customClass: () => {
                return tooltipTriggerEl.classList.contains('has-error') ? 'tooltip-error' : '';
            },
            title: () => {<not empty>}
        });
    });

When I debug, I can see that the functions for title and customClass are only called once.

I also tried manually update it without luck. That concludes that I'm probably creating the tooltip wrong.