How do I set multiple lines to my tooltip text for Material UI IconButton?

Question

I want to use material UI's IconButton component with a tooltip attribute. However, my tooltip value is a long string. How do I set my string to read on multiple lines instead of just one line for the tooltip pop up text?

const longSentenceForToolTop = "this is a really long tip and I would like to set it to multiple lines so I do not have one really long line as my tip going across my view because that would be obnoxious"

<IconButton
  tooltip={longSentenceForToolTop}
  tooltipPosition="top-center">
  <FontIcon
    className="material-icons">
    info_outline
  </FontIcon>
</IconButton>

Update:

My code looks like the following:

const toolTipText = (text) => (
  <div style={{lineHeight: 15px, whiteSpace: pre}}>
  </div>
);

   <IconButton
      tooltip={tipText(text)}
      tooltipPosition="top-center">
      <FontIcon
        className="material-icons">
        info_outline
      </FontIcon>
    </IconButton>

Now the text is broken up on its different lines but floats over the icon and not above it. I'm trying to use CSS to position the text above the icon, and I am not succeed. Does anyone know how to manipulate the position of an element with position: relative set?

Answer 1

You can put any element you want inside of tooltip, not just text:

<IconButton
  tooltip={<div>First Line<br />Second Line</div>}
  tooltipPosition="top-center">
  <FontIcon
    className="material-icons">
    info_outline
  </FontIcon>
</IconButton>

If you're not sure how long the tooltip will be and you want to force line breaks, you can use set the width of the div and force word wrapping (you can also force text align to the left in you don't want it centered):

<IconButton
  tooltip={
    <div style={{ width: 100, whiteSpace: 'normal', textAlign: 'left' }}>This is a very long tooltip</div>
  }
  tooltipPosition="top-center">
  <FontIcon
    className="material-icons">
    info_outline
  </FontIcon>
</IconButton>

Answer 2

You can create a new class like line-break and then add the css property white-space: pre-line so that \n is interpreted as a line break. Here is a quick example:

https://codepen.io/yowakita/pen/VPNxBV

In your specific case, you can inline the whiteSpace into the style property of the IconButton.

const text = 'Hello, this is line one \n and this is line 2';
  return 
    <IconButton
      style={{whiteSpace: 'pre-line'}}
      tooltip={text}
      tooltipPosition="top-center">
      <FontIcon
        className="material-icons">
        info_outline
      </FontIcon>
    </IconButton>

Edit: Seems like this didn't work for you- try placing the string into a div with the inline styling and then passsing it as a node to the tooltip property of IconButton.

const text = <div style={{whiteSpace: 'pre-line'}}>{'Hello, this is line one \n and this is line 2'}</div>;
  return 
    <IconButton
      tooltip={text}
      tooltipPosition="top-center">
      <FontIcon
        className="material-icons">
        info_outline
      </FontIcon>
    </IconButton>

Note that the tooltip property for the IconButton in material-ui is a node type, so it can take in numbers, strings, elements or an array (or fragment) containing these types.

So instead of passing in a long string you could also pass in another component/element, such as a set of divs that split up that long string of text:

const longSentenceForToolTop = 
  <div>
    <div>this is a really long tip and I would like to set it</div>
    <div>to multiple lines so I do not have one really long</div> 
    <div>line as my tip going across my view because that would</div>
    <div>be obnoxious</div>
 </div>

Answer 3

For a one (or two) off, here is an inline style.

Separate your info with \n and put it inside a div with the white-space property set to pre-line.

const infoItems = ["line one", "line two"]
const tip = infoItems.join('\n')

<Tooltip
    title={
        <div style={{ whiteSpace: 'pre-line' }}>{tip}</div>
    }
>
    <IconButton/>
</Tooltip>