How to prevent the tooltip from overlapping the navigation bar?

[albertothedev]

By default, the tooltip's position will be at the top. However, this will be overriden when its size is greater than that of the visible area. For example, if it is too close to the top of the page and rendering it would cause it to clip outside of the bounds of the viewport it will be rendered at the bottom instead.

I have a navigation bar fixed to the top of my page and would like the tooltip's abovementioned behavior to account for its size, thus, rendering at the bottom when it detects it will overlap the navigation bar, e.g., 50px before the top of the page.

[gabrieljablonski]

As mentioned in #1127, you can customize the floating-ui middlewares to achieve different behaviors, such as the one you've described.

Maybe something like this might work, please let me know.

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

<Tooltip
  middlewares={[offset(10), flip({ padding: 50 })]}
/>

[albertothedev]

Thanks for the prompt reply.

Unfortunately, the code you have shared makes the tooltip content cut off close to the margins:

Default behavior:

With your code:

I understand that offset(10) is setting the distance of the tooltip from the markup to be 10px and flip({ padding: 50 }) is declaring a buffer of 50px, but I don't understand why the tooltip no longer respects the margins. When it is longer it looks way worse, as it cuts off at the same point in its length as the screenshot shows, almost half way.

I am also worried that flip({ padding: 50 }) is setting a padding on all directions. It doesn't matter to me right now with the way I am using react-tooltip, but is there a way to only set a top padding?

[gabrieljablonski]

By default, the tooltip also uses the shift() middleware, which I didn't include. This should fix the issue with the margin.

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

<Tooltip
  middlewares={[offset(10), flip({ padding: 50 }), shift({ padding: 5 })]}
/>

---

As for your question about top padding, while I do understand what you mean, it doesn't exactly make sense in this case since that's not how the overflow works. I believe it should work as-is for your use case, but if not, try reading the floating-ui docs and see if there's anything there that might help you.

[albertothedev]

Thanks, that worked perfectly!

[albertothedev]

Regarding my concerns about flip({ padding: 50 }), I have looked at floating-ui's docs and found that that flip() accepts all of detectOverflow's options, and one of those is padding, so this can be done:

flip({ padding: { top: 50 } })