Bootstrap 5 Tooltip with inline SVG

[coliff]

I've been testing the Bootstrap v5 tooltips (https://v5.getbootstrap.com/docs/5.0/components/tooltips/) but having an issue using them with inline SVGs. The tooltip triggers off when hovering over the SVG - resulting in a flicker of the tooltip showing/hiding.
Simplified test-case CodePen here:
https://codepen.io/coliff/pen/JjXpOJY

The same code works fine with Bootstrap v4.
https://codepen.io/coliff/pen/VwadMKX

(side note; as a stop-gap fix adding the css svg {pointer-events: none} fixes the issue).

This issue was discussed in a bit more detail at: #31618

[mdo]

Any thoughts @Johann-S?

[Johann-S]

I made a CodePen with Bootstrap 5 using jQuery and the same problem occur, see: https://codepen.io/Johann-S/pen/dyMqBdq

So AFAIK it seems a CSS related issue to me since the Tooltip JS side changed a bit in v5 but not that much 🤔 Maybe in v4 we use pointer-events and not in v5

[Johann-S]

Seems fixed in Alpha 3 see: https://codepen.io/Johann-S/pen/rNLPpMv

[mdo]

Slating this for Beta 1 so we can work in a recommended fix.

[Johann-S]

it seems fixed to me we can close this issue

[mdo]

Oh my bad, great!

[tkrotoff]

The issue is still present:

(I've used https://codepen.io/Johann-S/pen/dyMqBdq and changed width="64" height="64" + <path fill="red" to make the issue more visible)

[XhmikosR]

Yeah, you can see the issue on our docs too.

[Gurinderp]

Could I grab this issue if no one is working on it yet?

[tkrotoff]

@Gurinderp
Yes, I wanted to to it but I lack time. How I see it:

• Understand why it works with Bootstrap v4
• The resolution is probably about adding "pointer-events: none":
  • https://stackoverflow.com/questions/37902708/google-charts-tooltip-flickering
  • https://www.google.com/search?q=flicker+tooltip+svg

[alpadev]

It got something to do with how v5 is handling events vs how jQuery does it.

In particular it is related to the mouseenter event. The current implementation doesn't use mouseenter under the hood but mouseover instead, which does bubble unlike mouseenter. Also it currently does dispatch an event everytime the mouse moves over descendant elements.

[smallersign]

Hope BS-B2 will be fixed, getting stopped all SVG tooltip.

[mdo]

@twbs/css-review Do we include the pointer-events change as suggested in the opening comment here, or is this something to be tackled in our JS?

[ffoodd]

This should be done, won't be enough I guess: as stated on MDN pointer-events page:

In addition to indicating that the element is not the target of pointer events, the value none instructs the pointer event to go "through" the element and target whatever is "underneath" that element instead.

Note that preventing an element from being the target of pointer events by using pointer-events does not necessarily mean that pointer event listeners on that element cannot or will not be triggered. If one of the element's children has pointer-events explicitly set to allow that child to be the target of pointer events, then any events targeting that child will pass through the parent as the event travels along the parent chain, and trigger event listeners on the parent as appropriate. Of course any pointer activity at a point on the screen that is covered by the parent but not by the child will not be caught by either the child or the parent (it will go "through" the parent and target whatever is underneath).

Elements with pointer-events: none will still receive focus through sequential keyboard navigation using the Tab key.

So it'd need to be applied to svg and svg *, and might still break for some events or when navigating with keyboard (though I don't know about the edge cases here).

@alecpl comment is very helpful: bubbling event is the real issue here, and using pointer-events seems useful but not a solution.

Does anyone know why we're using mouseover now? ping @twbs/js-review

[alpadev]

@mdo imo this should be solved by JS. The problem, as I mentioned earlier, is within the implementation of the mouseenter event in v5. Natively mouseenter doesn't dispatch an event when hovering over descendent elements, but the current implementation simply replaces it with mouseover instead, which behaves a bit different.
See

bootstrap/js/src/dom/event-handler.js

Lines 21 to 24 in bb19b08

	const customEvents = {
	mouseenter: 'mouseover',
	mouseleave: 'mouseout'
	}

bootstrap/js/src/dom/event-handler.js

Lines 149 to 153 in bb19b08

	const custom = customEvents[typeEvent]
	if (custom) {
	typeEvent = custom
	}

Using pointer-events might work in this case, but it feels like a workaround rather than a fix. The jQuery (v3) implementation also works a bit different. It actually uses mouseover under the hood but is doing some event delegation to prevent descendent elements from dispatching.

Not exactly sure what's the reasoning behind this. The the support for mouseenter is quite good according to https://caniuse.com/mdn-api_element_mouseenter_event. Although MDN mentions some perfomance issues on deep nested hierarchies https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event#usage_notes and https://bugzilla.mozilla.org/show_bug.cgi?id=432698#c48.

On Chrome I can't confirm this though - Tried on an element that is nested 100 levels deep:

Mouseover:

Mouseenter:

[saptam-dev]

Hi
Please take care about this issue.
I checked bootstrap 5 beta1 tooltip example. But I face problem here.
Check here it's not working. See svg with tooltip section.
Please anyone give me a solution.
Thanks in advance.

[sbrink]

Combining the answers above, this worked for me as a temporary solution:

CSS:
svg, svg * { pointer-events: none; }

As stated before this might break other things. At the moment is seems to be good enough
till we have a clean(er) solution.

[mdo]

@alpadev Would you be willing to share a PR to make the necessary changes here? Pinging @twbs/js-review for more guidance if needed.

[alpadev]

@mdo sure, I will have a look. IMO the easiest way to fix this would be to just allow the native mouseenter or mouseleave events. Is there any particular reason why it was decided not to use them?

[alpadev]

Sorry I got infected with Covid lately so I wasn't able yet to really have a look. But to give some little update.
It's actually not as easy as I considered this to be with just enabling mouseenter or mouseleave at least not for the delegated handlers. Will continue to try finding a way/place to patch in the neccessary functionality.

[alpadev]

Another update. I partly managed to make EventHandler properly handle mouseenter and mouseleave events. on, trigger and off (with or without delegation) behave more or less like the native counterparts. One problem I'm facing now is with one not removing the handler properly.

I don't feel like it would be a good thing to do some bigger refactoring at this state because we are at beta but
IMO the event system implementation is quite complex as it is right now and could need some improvements.

While this is likely to somewhat improve the problem with SVGs because there would be less events triggered, during testing I recognized there is a problem with the tooltip plugin in general that wouldn't be solved by this. I just checked the issues and I guess I should maybe spend time on this #32372 instead. This could solve both issues but we should create some follow up ticket on the event handling.
@XhmikosR what do you think?

Here is a PR with the fix for the event handling: #33310
Before fix:

After fix: