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?
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