fix: EVER-14122 tooltip text wrap when using strings and width input#323
fix: EVER-14122 tooltip text wrap when using strings and width input#323lihnick merged 4 commits intocision:masterfrom
Conversation
| white-space: nowrap; | ||
| word-wrap: none; | ||
| white-space: normal; | ||
| overflow-wrap: break-word; |
There was a problem hiding this comment.
white-space: normal wraps long sentences and overflow-wrap: break-word wraps long words
There was a problem hiding this comment.
This will cause a visual issue when there's no tooltip width defined.
The reason we initially used white-space: nowrap is that, without a defined width, the tooltip contents will be constrained to the width of the trigger element.
Frequently the tooltip is a place to put a longer explanation for something like an icon button, where the trigger is very narrow. nowrap means, in those cases, a multi-word phrase like "Delete an influencer" would display in a one-line tooltip under the trashcan icon.
pixelbandito
left a comment
pixelbandito
left a comment
There was a problem hiding this comment.
Can you make the new styles conditional, only when the tooltip has a defined width?
| white-space: nowrap; | ||
| word-wrap: none; | ||
| white-space: normal; | ||
| overflow-wrap: break-word; |
There was a problem hiding this comment.
This will cause a visual issue when there's no tooltip width defined.
The reason we initially used white-space: nowrap is that, without a defined width, the tooltip contents will be constrained to the width of the trigger element.
Frequently the tooltip is a place to put a longer explanation for something like an icon button, where the trigger is very narrow. nowrap means, in those cases, a multi-word phrase like "Delete an influencer" would display in a one-line tooltip under the trashcan icon.
2 participants
No description provided.