Bootstrap 5 Tooltip with inline SVG icon issue

[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.
The same code works fine with Bootstrap v4. I think (assume) there must be a workaround to get this working. Any suggestions?

Simplified test-case CodePen here: https://codepen.io/coliff/pen/JjXpOJY

[Johann-S]

nice catch @coliff 👍
IMO it should be an issue

[coliff]

I just went to open an issue now and see that one was opened yesterday (#31616) - which looks like it has a PR (currently unmerged) #31115

[XhmikosR]

@coliff IIRC the issue was fixed in #30928. Please try the latest main branch to confirm.

[coliff]

thanks @XhmikosR - just tested this with the main branch JS now and it's hugely improved... but there's still a slight flicker when you hover over the edges of the paths of the SVG. I made a new CodePen to show. (it flickers when you scroll off or on to the twitter bird within the square)
https://codepen.io/coliff/pen/wvGmpaE

[XhmikosR]

True, not sure what the cause is, though. Maybe @tkrotoff has any ideas.

[XhmikosR]

Also, better make a new issue. Discussions are not meant to be used for such things.

[tkrotoff]

@XhmikosR @coliff I don't think there is a solution here.

If you remove everything Bootstrap related and just keep regular title="..." you get the same issue: https://codepen.io/tkrotoff/pen/XWdYgVP

It seems like when hovering the SVG background it creates a tooltip, then when hovering over SVG <path> it destroys previous tooltip and creates another => flickering

• Chrome 85: "bug"
• Firefox 80: tooltip (title="...") works differently so the "bug" is not applicable
• WebKit 2.28.4 (via GNOME Web 3.28.6) : no "bug", it works fine

[coliff]

Interesting find that the issue happens even without Bootstrap JS, but the issue is not present (there is no flickering) with Bootstrap 4.5 JS (codepen: https://codepen.io/coliff/pen/VwadMKX ) so I think it should be something that is solvable.

I'll open a new issue with links to the Codepens and an explanation.

[patrickhlauke]

i'll hazard a guess that adding something like pointer-events:none to the SVG will make it "transparent" to mouse events and allow the tooltip stuff to work correctly

[coliff]

thanks Patrick! Yes, just tried that and adding:

svg {
  pointer-events: none;
}

does in fact fix the issue. 👍 I hope that fix could somehow be added to Bootstrap v5 so we don't need to manually add that.

[XhmikosR]

Please make a new issue. We can't track discussions.

[tkrotoff]

Issue: #31646

[mdo]

Locking this since the issue is now open. Please punt further comments there :).