everweij / react-laag

Hooks to build things like tooltips, dropdown menu's and popovers in React
https://www.react-laag.com
MIT License
906 stars 44 forks source link

The arrow position is not aligned to the tooltip if the toggle element is too large #21

Closed yuri-kulikov closed 4 years ago

yuri-kulikov commented 4 years ago

The arrow position is not aligned to the tooltip if the toggle element is too large and we use a corner anchor: Kapture 2019-12-10 at 14 01 26

everweij commented 4 years ago

Hi Yuri, thanks for reporting this issue! Also thanks for the GIF, very helpful πŸ‘πŸΌ

Although I only came across scenario's where the toggle element is always smaller then the layer, I definitely think we should support cases where the trigger element is bigger than the layer. What is the behaviour you're expecting? Personally, I think the example below looks the nicest:

Screen Shot 2019-12-10 at 17 19 55
yuri-kulikov commented 4 years ago

@everweij, thanks for the quick response!

Personally, I think the example below looks the nicest: \

Yeah, that's what I think I'd expect to see πŸ‘

One more thought (probably obvious πŸ™‚ ): I feel that this solution can be a bit tricky, because if the trigger is small again and we use the β€œdiagonal” anchor and align the arrow to the center of the tooltip, there may be the opposite problem.

everweij commented 4 years ago

I've just pushed v1.6.0, which should fix this issue. Can you check / confirm whether this works for you? bigger-smaller-trigger

yuri-kulikov commented 4 years ago

πŸš€ Yeap, it works for me!

But I've found an issue: Kapture 2019-12-11 at 11 28 25 Kapture 2019-12-11 at 11 30 40

everweij commented 4 years ago

Ah snap, good catch! πŸ˜… Jup, need to fix that!

everweij commented 4 years ago

I think I've fixed it :)

yuri-kulikov commented 4 years ago

Thank you, works great! πŸ‘