How to ensure tooltip stays in browser visible area?

[NashL]

I realized that when the text I want to display inside the tooltip is too long and there are no breaklines inside the text (\n), the tooltip container runs off the page, I would like to make the tooltip container take on the maximum width as possible without leaving the viewport

[gabrieljablonski]

Try something like this

.react-tooltip {
  max-width: calc(100vw - 54px);
  word-break: break-all;
}

You might want to play around with the word-break attribute, but the max-width should be good.

By my calculations, it should actually be 42px, since there's an internal padding of 16px on each side, plus a 5px minimum margin from the page border, but for some reason that's not enough.

[gabrieljablonski]

Figured it out, it's because there was a scrollbar when I was testing, 42px is indeed the correct number. Here's a suggestion on how to deal with a scrollbar

body {
  --scrollbar-width: calc(100vw - 100%);
}

.react-tooltip {
  max-width: calc(100vw - 42px - var(--scrollbar-width));
  word-break: break-all;
}

This assumes that the html body is the element on your application that has the scrollbar. You might have to adjust that.

[NashL]

It works for top and bottom tooltips I guess for left or right tooltips it's a bit more complex but work for my current needs!

[gabrieljablonski]

Good to know it works for you. The ideal solution would probably have to use floating-ui's middlewares, such as the size one, but it would probably require some changes to the tooltip implementation.