Popper/Tippy prohibit overflow of other elements

Question

I'm using Tippy to create tooltips for options that configure a belt, but the tooltip overlaps the belt preview (See below).

It currently looks like this, when it overflows the main belt preview: http://snpy.in/Btw2ZP

But I'd like to adjust the maximum height for it to look like it goes out of bounds: http://snpy.in/j43oIl

This functionality is already built in when the Tooltip is higher than the screen, it then pops down. I want to make it do it sooner. Is there a way to configure this?

So basically you want the tooltip to jump under the belt as soon as there is enough space to show it there and not only when there is not enough space above? Or you want it below the element at all times? something like this : https://codepen.io/wyzix33/pen/abwegbg — Gabriel, Oct 07 '21 at 15:22

score 0 · Answer 1 · edited Oct 07 '21 at 16:05

I'm not 100% sure if this is what you're asking, but you can set the maximum height of the tooltip by adding CSS to the tooltip. Tippy.js is just a lightweight tooltip-focused wrapper Popper.js, so all of Popper's configuration apply as well to Tippy.

Here is Popper's documentation on editing Tooltip styles: https://popper.js.org/docs/v2/tutorial/#styling

You can also just add a class to Tippy's HTML content with a max-height CSS rule: https://atomiks.github.io/tippyjs/v6/html-content/

This functionality is already built in when the Tooltip is higher than the screen, it then pops down. I want to make it do it sooner. Is there a way to configure this?

No, there doesn't appear to be a way to configure this. There is no mention of this in either Tippy's documentation, or Popper's (the underlying engine used by Tippy). Your best shot at this is either playing with the tooltip's content height or max-height CSS properties, or playing with the offset property.

Offset documentation from Tippy https://atomiks.github.io/tippyjs/v6/all-props/#offset

Offset documentation from Popper https://popper.js.org/docs/v2/modifiers/offset/#offset-1

Popper/Tippy prohibit overflow of other elements

1 Answers1