Bootstrap: v5: Tooltip issue when containing HTML

[pboutin]

When there are DOM nodes inside a tooltip container, the hover states of those nodes seems to conflict with the container.

Reproduced: https://jsfiddle.net/89mpekhg/1/

Steps to reproduce:

• Hover the "Hello" part (the tooltip shows up)
• Hover the <strong> tag (the tooltip goes away ⚠️ )
• And on mouseleave, errors are thrown into the console (teardown of an already gone tooltip ⚠️ )

Temporary workaround:
Use the trigger: 'manual' option and handle the mouseenter and mouseleave manually.

[silviodelgado]

It happens with any tag inside tooltip target.
E.g.: a button with an icon (font-awesome or any other):
When the mouse pointer is hovering the button, tooltip is ok.
But, when the mouse pointer hovers the icon, tooltip is gone.
When mouse pointer leaves the button completely and hovers it again, tooltip is shown.

[patrickhlauke]

I seem to remember this being a browser bug, or at least an unexpected spec issue.

As a possibly more robust and less invasive patch, try adding

[data-toggle="tooltip"] * { pointer-events: none; }

which makes any child element of the tooltip trigger "transparent" to the mouse, so the mouse events don't get fired/blocked by child elements

[silviodelgado]

@patrickhlauke Wow!! Nice trick! It works like a charm.
Thank you!

[silviodelgado]

Just one more thing:
After close a modal popup, an error is fired:

tooltip.js:343
Uncaught TypeError: Cannot read property 'destroy' of null
    at n (tooltip.js:343)
    at e.i.hide (tooltip.js:370)
    at HTMLDivElement._hideModalHandler (tooltip.js:555)
    at HTMLDivElement.n (event-handler.js:101)
    at Object.trigger (event-handler.js:326)
    at t.e.hide (modal.js:166)
    at HTMLButtonElement.<anonymous> (modal.js:143)
    at HTMLDivElement.i (event-handler.js:116)

The modal's opening is fired by a button with tooltip.

Any suggestion?

[mznet]

@silviodelgado That problem is handled by the PR. It would be resolved when the pr is merged.

[silviodelgado]

@mznet Ok. Thank you!

[GilbertoDev]

did you use try : HTML disabled attribute ? https://stackoverflow.com/questions/33692285/remove-css-hover-functionality-using-javascript

[pboutin]

Also, calling the .dispose() function on a tooltip that has been shown at least once cause a crash.

[XhmikosR]

@patrickhlauke is this the same issue as #31646?

[patrickhlauke]

smells like it, yes

[XhmikosR]

I'm going to close this. I don't see any errors with 5.0.0-alpha3.