Tippy position is just wrong and I dont know what to do...

atomiks / tippyjs

Tooltip, popover, dropdown, and menu library

https://atomiks.github.io/tippyjs/

MIT License

12.03k stars 520 forks source link

Tippy position is just wrong and I dont know what to do... #970

Closed RickKukiela closed 3 years ago

RickKukiela commented 3 years ago

Nothing I change in the settings or the css of the elements on the page around it have any effect. It just doesn't work right :(

I'm literally only passing the content option on this screen shot. The layout is flex, everything is border-box. Using the CDN version from the getting started guide.

RickKukiela commented 3 years ago

Also, after a lot of testing I have also been able to prove that the issue is multiplied by how wide the window is. So if I make the browser window somewhat narrow, its much closer to being correct though not 100% usually. If I stretch the window across my 3 monitors the tip will be off by 100 - 200 pixels.

Something is off with the way its calculating the transform / translate x value and I'm not sure what it is. I had this working at one point and now its not and I cannot for the life of me figure out what is messing it up...

atomiks commented 3 years ago

A Popper update might have broken something. If you downgrade to an old version, @2.9.2 is there an issue?

RickKukiela commented 3 years ago

Honestly I threw my hands up with this and implemented a different library that didn't give me any problems and have moved on. Good luck.

baraa-elwan commented 3 years ago

@atomiks this problem appears only if the target position is absolute

Note: changing popper version didn't help

tadaskarpavicius commented 3 years ago

Can confirm this. Tooltips were all over the place for me too. Loading Popper@2.9.2 through the CDN fixed the issue. This should be fixed ASAP... How do I lower Popper version if I load the plugin through the npm?

atomiks commented 3 years ago

@tadaskarpavicius If you add it as a dependency with strict version lock it should use that version: "@popperjs/core": "2.9.2"

atomiks commented 3 years ago

https://github.com/popperjs/popper-core/releases

Can you also test each version from 2.9.3 until the most recent one and tell me which version causes the issue and a CodePen demonstrating it? Then I can try and debug it and submit a PR for a fix for Popper.

atomiks commented 3 years ago

After investigating myself I found an issue with a recent PR in Popper that looks like it broke positioning for all elements that aren't a full pixel/integer width or height (which is like, most elements that have computed width/height from text....) I've submitted a PR so hopefully it should be fixed ASAP.

atomiks commented 3 years ago

This should now be fixed in the latest Popper version