atomiks / tippyjs

Tooltip, popover, dropdown, and menu library
https://atomiks.github.io/tippyjs/
MIT License
11.93k stars 520 forks source link

Prevent tooltip to overflow on other elements #851

Closed AncaBucalaete closed 4 years ago

AncaBucalaete commented 4 years ago

Hi, I have a button with a tippy tooltip. The tippy content might be very small or pretty big, can be sometimes larger then my screen so I'll need to scroll down my page to see the end of it. I problem I have is that I have a menu bar on the upper side and it needs to be visible all the time, so the tooltip should never overflow that element.
Do you have any suggestions for me?

Thanks

atomiks commented 4 years ago

You can use Popper's preventOverflow modifier with a padding object that specifies a top property with a value matching the height of the menu bar.

https://popper.js.org/docs/v2/modifiers/prevent-overflow/