Multiline tooltip using only React

Question

I'm trying to build a multiline tooltip using [this example], I'm using it as a refernce because it involves functional components. It works just fine, when its a short line of text, but doesn't go on a new line, which is something that I need.

I tried adding < /br > inside of the content, changing the content to jsx format and adding code below to the css file:

  width: 200px;
  word-wrap: break-word;

All it managed to do was decrease the tooltip backgronud width to 200px.

How do I change code in the example to go on a new line if content size width is going above the predetermined width?

kind user · Accepted Answer · 2022-11-13 15:18:29Z

1

How do I change code in the example to go on a new line if content size width is going above the predetermined width?

Besides setting the width to the e.g. 200px, you should also remove the white-space: nowrap; property because that is simply disallowing the text to break, even if it does overflow the container.

Codesandbox: https://codesandbox.io/s/how-to-make-an-extremely-reusable-tooltip-component-with-react-and-nothing-else-forked-v09e4y

More info about white-space property: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

answered Nov 13, 2022 at 15:18

kind user

42k8 gold badges69 silver badges78 bronze badges

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

1 Comment

Nikita Kulikov Over a year ago

Thanks alot kind user! Completely overlooked that property

Collectives™ on Stack Overflow

Multiline tooltip using only React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related