search

atomiks / tippyjs

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

Prohibit overflow of other elements #978

Closed HenrijsS closed 2 years ago

HenrijsS commented 2 years ago

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?

atomiks commented 2 years ago

You might want to specify a custom wrapping div for the flip modifier that wraps the content below the belt.

popperOptions: {
    modifiers: [
    {
      name: 'flip',
      options: {
        boundary: document.querySelector('#myCustomWrapper'),
      },
    },
  ],
}
<div id="belt"></div>
<div id="myCustomWrapper">
  content...
  <button id="withTooltip"><button>
</div>
atomiks commented 2 years ago

I've enabled Discussions for all questions to go inside instead of Issues.