How to ensure tooltip stays in browser visible area? #1133
-
I realized that when the text I want to display inside the tooltip is too long and there are no breaklines inside the text ( |
Beta Was this translation helpful? Give feedback.
Answered by
gabrieljablonski
Dec 7, 2023
Replies: 1 comment 3 replies
-
Try something like this .react-tooltip {
max-width: calc(100vw - 54px);
word-break: break-all;
} You might want to play around with the 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. |
Beta Was this translation helpful? Give feedback.
3 replies
Answer selected by
NashL
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Try something like this
You might want to play around with the
word-break
attribute, but themax-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.