react-tooltip icon indicating copy to clipboard operation
react-tooltip copied to clipboard

Wrong tooltip position in Firefox/Safari when assigned to element not wholly visible.

Open drzamich opened this issue 6 years ago • 3 comments

I was testing the tooltip assigned to a text cropped with ellipsis. On Chrome it is positioned nicely. On Firefox and Safari however, its position is calculated wrong. This when effect="solid" and placement="top|bottom"

Correct position (Chrome) image

Wrong position (Firefox, Safari) image

I have discovered that the reason for that is how browsers understand the Element.getBoundingClientRect().width. In Chrome is is the portion of width visible to the user. In Firefox / Safari is the total width, including the hidden part.

Chrome image

Firefox / Safari image

drzamich avatar Sep 12 '19 14:09 drzamich

Obviously this is a purely browser problem. It should to be fixed based on the HTML tag I guess.

ptaberg avatar Jul 23 '21 09:07 ptaberg

Any updates on that?

exsesx avatar Oct 07 '22 13:10 exsesx

We're targeting Safari (many people are), so we must fix this.

Does anybody have plans to work on this, or will it not work in Safari? If so, why?

exsesx avatar Oct 11 '22 07:10 exsesx