Tippyjs: How can one make a scrollable Tippy?

[alexnault]

How can one make the content of a Tippy scrollable if the parent/viewport doesn't allow enough space for the Tippy to display in full?

Here's a Codepen

Setting a CSS max-height would work, but not with dynamic heights such as the viewport.

Thanks for everything you do for this lib, it is awesome!

[atomiks]

That's an interesting and difficult question, I don't think it's easy to do with CSS.

I think you could add some code in popperOptions.onUpdate that calculates the distance between the bottom of the reference element and the bottom of the viewport (and also all the different variations/placements it can have) and set the max-height based on that

[alexnault]

It's pretty limited, but here goes: https://codepen.io/anault/pen/WqeaYZ (currently does not support flip, other placements, etc.)

@atomiks Would it be interesting to natively support this kind of functionality in Tippy?

[atomiks]

Nice work! Only thing I noticed is it transitions by default and lags behind the resize (because the tooltip styles transition everything, including max-height by default in CSS). In upcoming v5, the tooltip elements specifies transition-property explicitly which you could specify as well to fix that.

Would it be interesting to natively support this kind of functionality in Tippy?

There are probably sooo many edge cases to consider that I don't think I'd work on it for a while lol. Keeping Tippy's core surface area as small as possible is better for maintenance, especially if something like this can be externally-added.

[guanzo]

I'm running into this too. UI/UX wise, are there any alternative solutions besides dynamically detecting overflow, shrinking the tippy to fit, and adding a scrollbar?

My app is forced to be 320px by 500px, so Im encountering a lot of overflowing when tippys have lots of vertically stacked content, and the tippy ref is near the vertical center of the 500px height. When the ref is near the top/bottom, everything fits.

[atomiks]

I don't think so, isn't it an inherent problem regarding 2D space haha.

In any case you can use https://www.npmjs.com/package/popper-max-size-modifier to do the size detection for you.