-
-
Notifications
You must be signed in to change notification settings - Fork 78.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bootstrap 5 Tooltip with inline SVG #31646
Comments
Any thoughts @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 |
Seems fixed in Alpha 3 see: https://codepen.io/Johann-S/pen/rNLPpMv |
Slating this for Beta 1 so we can work in a recommended fix. |
it seems fixed to me we can close this issue |
Oh my bad, great! |
The issue is still present: (I've used https://codepen.io/Johann-S/pen/dyMqBdq and changed |
Yeah, you can see the issue on our docs too. |
Could I grab this issue if no one is working on it yet? |
@Gurinderp
|
It got something to do with how v5 is handling events vs how jQuery does it. In particular it is related to the |
Hope BS-B2 will be fixed, getting stopped all SVG tooltip. |
@twbs/css-review Do we include the |
This should be done, won't be enough I guess: as stated on MDN
So it'd need to be applied to @alecpl comment is very helpful: bubbling event is the real issue here, and using Does anyone know why we're using |
@mdo imo this should be solved by JS. The problem, as I mentioned earlier, is within the implementation of the bootstrap/js/src/dom/event-handler.js Lines 21 to 24 in bb19b08
bootstrap/js/src/dom/event-handler.js Lines 149 to 153 in bb19b08
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 On Chrome I can't confirm this though - Tried on an element that is nested 100 levels deep: |
Hi |
Combining the answers above, this worked for me as a temporary solution: CSS: As stated before this might break other things. At the moment is seems to be good enough |
@alpadev Would you be willing to share a PR to make the necessary changes here? Pinging @twbs/js-review for more guidance if needed. |
@mdo sure, I will have a look. IMO the easiest way to fix this would be to just allow the native |
This comment has been minimized.
This comment has been minimized.
Sorry I got infected with Covid lately so I wasn't able yet to really have a look. But to give some little update. |
Another update. I partly managed to make 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 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. Here is a PR with the fix for the event handling: #33310 |
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
The text was updated successfully, but these errors were encountered: