0

I have a component with tooltip icon when there is an error. The problem starts when the text for the tooltip includes a one large word (without spaces).

In such case the text inside the tooltip box exceed the borders.

Please see this sandbox: https://codesandbox.io/s/fragrant-morning-267l5

Improve this question
1
  • Please add the relevant code in the question. If the url becomes invalid the question will have no value Commented Dec 1, 2019 at 18:39

1 Answer 1

Reset to default
1

By default, word breaks on a new line if it is long enough that there is no space left for it to be on the same line. Since you are typing one long word it can't find a new word to break on so it goes over the box.

What you can do is instead breaking on a word you can break on a letter

word-wrap: break-word;

Add that CSS to text. When it runs out of space for new letter it will go to next line.

Read more about it here

Hope this helps :)

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

It will be ugly, can't cause the background to be extended over the project component to include all text as is? reffer to this issue: github.com/carbon-design-system/carbon/issues/3887
you can. Give box a width: auto or width: fit-content. It should stretch around its child but still it depends on style of your elements.
It's not working to me :~, I'm trying to affect the bx-aasistive-text from carbon component as I mentioned in the their github issue link but it's not affecting it! .bx--assistive-text { /*word-wrap: break-word;*/ /*position: absolute;*/ max-width: none; width: fit-content; }
well, I understand your concerns but how long a word can be? Especially in error message? You want to cover all cases but isn't that a bit unnecessary in this case? Also give your text holder display: inline-block.
it can be very long, cause it includes a resource name that not allow spaces and can include the server name and other details. mostly it will be long. will try the display: inline-block and let you know

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.