Tooltips: Quickly hovering over animated tooltips causes positioning to break #36875
Comments
leettaylor
changed the title
|
Same here. When broken, the tooltip's inline style is not set |
|
Any guesses fixing it, are welcome |
|
From what I can tell, it looks like the tooltips hide animation callback is running out of sequence, causing it to remove the properties that were just added by the show method. In turn breaking the tooltips layout. As a guess, it's all caused by entering the button element again, before the previous exit animation had completed. |
This comment has been minimized.
This comment has been minimized.
|
I'm having the same problem, it's showing up in Bootstrap as well. A tooltip appears at the bottom of the page because inline-style has stopped working. |
|
I have just experienced this when upgrading from v5.2.0-beta to v5.2.0. v5.2.0-beta - Not happening: Screen.Recording.2022-09-24.at.12.46.16.movv5.2.0 - Bug happening: Screen.Recording.2022-09-24.at.12.44.06.movHopefully that helps in tracking it down. |
|
From an an initial look though the history (and having zero prior knowledge) I'm suspicious that this was introduced by #35679 which changed the tool tip to be fully recreated on each invocation (to fix some location bugs I think). However, now if the old tooltip is still visible due to its animation when it is re-triggered a new one is created in its place. I wander if the when tooltip is re-triggered during an exit animation it should use the old behaviour of using the existing element, rather than creating a new one. I think @tobydeieso is on the right track, is it adding the styles to the old element not the new one? |
|
Indeed it is related to the exit animation. If you set the animation to false, the issue disappears. |
|
It's not just when quickly hovering either, if you slowly hover it breaks too. Example: https://codepen.io/ryanmortier/pen/qBKVpra?editors=1010
|
|
I believe #37235 from the 5.2.3 release fixed this |
|
Seems fixed in 5.2.3 to me, no longer reproducible in same location as my comment above. Screen.Recording.2022-11-22.at.19.39.44.mov |
Prerequisites
Describe the issue
When quickly hovering off and back onto an item with a tooltip it sometimes causes the tooltip positioning to break. This then places the tooltip at the end of the
<body>and causes horizontal/vertical scrollbars to appear on the page.If animation is disabled on the tooltips then this problem doesn't seem to occur.
Reduced test cases
Can see it in action on the Tooltips docs page. Scroll to the Directions examples and move your mouse backwards and forwards over the buttons and eventually you'll see a horizontal scrollbar appear.
If you attempt to do the same thing on the v5.1 docs page it works perfectly.
Minimal examples:
What operating system(s) are you seeing the problem on?
Linux
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
v5.2.0
The text was updated successfully, but these errors were encountered: