Tooltip placement (Firefox, etc..)

[tommy-codez]

Hi there,

I am not sure if this is posted already, but the Tooltip beta component has some issues with placement.

• there are problems with the tooltip at the edge on a page
• in firefox the tooltip in modal dialog shows on "weird" places

i put a example on codesandbox here, https://codesandbox.io/s/tooltip-test-0mmvzg

greetings

[acstll]

Hey @tommy-codez, thanks for opening this!

there are problems with the tooltip at the edge on a page

I think this can be solved by using the preventOverflow prop on the Tooltip. I forked the sandbox to test it.

in firefox the tooltip in modal dialog shows on "weird" places

this is definitely a weird bug, in Firefox I don't even see the tooltip. We're exploring updating the placement utility we use for this, to use it also in other components like the Flyout Menu. But maybe this is something that can be fixed independently.

[felix-ico]

Hi @tommy-codez the issue with the weird placement in the modal has been fixed in beta.103 and together with the preventOverflow prop it seems to fix the tooltip placement issues https://codesandbox.io/s/tooltip-test-forked-p6u64p?file=/src/SomeComponent.tsx

[tommy-codez]

Thanks @felix-ico, the placement looks good in chrome and edge. But for me the tooltip still doesnt work in firefox ...

[felix-ico]

@tommy-codez thank you for the feedback, i can confirm that this issue persists on firefox. I will have another look to fix this with the current implementation.

[nowseemee]

Hey all, thanks for the valuable discussion. A rewrite of the tooltip component utilizing floating-ui instead of popperjs has been published (3.0.0-beta.108) and hopefully solves this issue. Feel free to reopen in case something is still not right.

[tommy-codez]

Hi, I tested it with Scale beta 108 and newest firefox Version (102) and the tooltip still doesnt show up correctly.

[nowseemee]

Hi @tommy-codez, thanks for the feedback! I'll take a look.

[felix-ico]

Hey @tommy-codez @nowseemee, it's been a while but I forked this codesandbox and updated scale to the latest version:

https://codesandbox.io/s/tooltip-test-forked-42ws7y?file=/package.json

and don't see the issue anymore. I'm closing the issue but feel free to reopen if I missed something.

[tommy-codez]

Hi there, I tested it again with current scale version. The problem with tooltips and also flyout menus still exist in modal windows. They appear at "random" places but not where they belong. Any tips ?