Tooltips show in wrong position when hovered from above on Safari

[nwalters512]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I'm adding a tooltip to an icon. On macOS Safari, when the icon is hovered by starting the mouse below the icon and moving up towards it, it shows correctly:

However, when the mouse starts above the icon and moved down toward it, it shows in the wrong place:

Here's a video illustrating the issue:

Screen.Recording.2022-09-01.at.15.05.18.mov

I cannot reproduce this bug in Chrome or Firefox.

Reduced test cases

Here's a JSFiddle illustrating the problem: https://jsfiddle.net/nwalters512/Lns1b9kj/4/.

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Safari

What version of Bootstrap are you using?

v5.2.0

[nalakapws]

Tooltips and popovers in Bootstrap are a nightmare.

[easypronunciation]

A related bug in Chrome on MacOS.
If I carefully hover to the tooltip from above, it doesn't show up at all on the first hover.
By "carefully" I mean the cursor should be exactly above the tooltip and the movement should start from considerable distance.
Bootstrap 5.2.1

[GeoSot]

/cc @atomiks can you help on this please? I cannot replicate it with linux or win11

[florianlacreuse]

I can reproduce the issue randomly with Fedora + Chrome.

[julien-deramond]

Reproduced on macOS with Safari, Firefox and Chrome. However it is less frequent with Firefox.
To reproduce, I simply move very fast the cursor outside and on the warning icon.

Information that might be useful.

When the tooltip is well displayed:

When the tooltip is not well displayed, there's no style.

[GeoSot]

Guys, I would like your feedback using the following script
https://deploy-preview-37235--twbs-bootstrap.netlify.app/docs/5.2/dist/js/bootstrap.bundle.min.js

or experimenting on this page
https://deploy-preview-37235--twbs-bootstrap.netlify.app/docs/5.2/components/tooltips/#custom-tooltips

[florianlacreuse]

On my side, I can no longer reproduce the issue on the preview page.

[julien-deramond]

@GeoSot Can no longer reproduce the issue by replacing bootstrap.bundle.min.js in https://jsfiddle.net/nwalters512/Lns1b9kj/4/ by your version. Patch seems to work well :)

[GeoSot]

Wonderful news guys and many thanks for your help 😄
#37235 will close this issue

[TechOverflow]

I am still experiencing this, BS 5.2.2, Safari latest. Thought I was going crazy or had a mistake in my elements.
I believe the problem only happens when placement is "top" (or default) and when the mouse move from the top.
In my case coming from the body of the card to the icon in the footer.
https://jsfiddle.net/pru7gv1y/