Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bootstrap 5 Tooltip with inline SVG

See original GitHub issue

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: https://github.com/twbs/bootstrap/discussions/31618

Issue Analytics

State:
Created 3 years ago
Reactions:7
Comments:22 (17 by maintainers)

Top GitHub Comments

4reactions

alpadevcommented, Feb 24, 2021

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.

2reactions

alpadevcommented, Feb 11, 2021

@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?

Top Results From Across the Web

Tooltips · Bootstrap v5.0

Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage ...

How do I show a bootstrap tooltip with an SVG object?

The problem was that the tooltip that Bootstrap v2.2.2 generates is a <div> that was getting inserted inside the <svg> , which made...

Tooltips on SVG using Bootstrap+Jquery - CodePen

Quick proof of concept for a project: Styling inline SVGs with CSS and using tooltips Manually edited the SVG for proper ID's for...

Bootstrap 5 Tooltip - W3Schools

Tooltips. The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element: Hover over me!...

Bootstrap Tooltips - GeeksforGeeks

In order to introduce tooltip, we add the data-toggle attribute to an element and we need to initialize the tooltip with jQuery. jQuery...