bootstrap
bootstrap copied to clipboard
twbs
Tooltips: Quickly hovering over animated tooltips causes positioning to break
Prerequisites
- [X] I have searched for duplicate or closed issues
- [X] I have validated any HTML to avoid common problems
- [X] I have read the contributing guidelines
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:
- With animation it breaks: https://stackblitz.com/edit/xe95wq?file=index.html
- Without animation it's fine: https://stackblitz.com/edit/xe95wq-1feimf?file=index.html
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
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.
Thank you for believing in me.
On Monday, August 15, 2022, Toby De Ieso @.***> wrote:
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.
— Reply to this email directly, view it on GitHub https://github.com/twbs/bootstrap/issues/36875#issuecomment-1214567299, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHORFC5UH7JJNDTYTVU7GEDVZGZCBANCNFSM55H2UNQA . You are receiving this because you are subscribed to this thread.Message ID: @.***>
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:
https://user-images.githubusercontent.com/31130/192096422-cd0ee453-25b0-4c19-a16e-8abc699df438.mov
v5.2.0 - Bug happening:
https://user-images.githubusercontent.com/31130/192096418-0dcee873-0aca-4b30-bb1e-09f284da1993.mov
Hopefully 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
Seems fixed in 5.2.3 to me, no longer reproducible in same location as my comment above.
https://user-images.githubusercontent.com/31130/203406407-5e4399c2-684e-47f5-915b-a050784e3af9.mov