Issue with long elements and middlewares

[zzkaa]

Some of the elements to which I add a tooltip are very long (they go beyond the viewport). The tooltip behaves correctly, but as soon as I add middlewares (even an empty array), it breaks down and always renders in the middle of the element, which in most cases means that it is invisible (it is outside the viewport). Is there any way I can fix this behavior? I have to add middlewares to solve another issue.

[gabrieljablonski]

When using the middlewares props, you override the default middlewares the tooltip uses internally. To keep the tooltip working as expected, you need to copy the default middlewares, like so:

import { offset, shift, flip } from '@floating-ui/dom'

<Tooltip
  middlewares=[
    offset(10),
    flip({
      fallbackAxisSideDirection: 'start',
    }),
    shift({ padding: 5 }),
    // your custom middlewares here
  ]
/>

Quick reminder that middleware order is important, so keep it in mind in case you run into any issues.