atomiks / tippyjs

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

Overflow issue #1019

Closed DavidSvi closed 2 years ago

DavidSvi commented 2 years ago

I just followed the basic installation of tippyjs, I am using the latest version 6.xx

<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/shift-away.css" />

I set the placement as placement: 'right-end' the issue with small screen size the tooltip overflow

image

My settings

image

How I can fix that ?

atomiks commented 2 years ago

Flipping by default only works on the opposite side, but on mobile you'll can fallback to either top or bottom like so:

popperOptions: {
  modifiers: [
    {
      name: 'flip',
      options: {
        fallbackPlacements: ['left-end', 'top-end', 'bottom-end']
      }
    }
  ]
}