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?

CodePudding user response：

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