How to make line break for ToolTip titles in Material-UI

Question

I am using the ToolTip component, I have two texts for the title, just wonder is that possible to render them as two lines (each language in one line) rather than one line? How can I apply the expected style to this component?

Here is the code:

renderToolTip = tipText => {
    const { classes } = this.props;
    if (tipText) {
      return (
        <Tooltip
          title={tipText}
          placement="left"
          classes={{
            tooltip: classes.tooltip,
          }}>
          <IconButton>
            <InfoOutlined />
          </IconButton>
        </Tooltip>
      );
    }
    return null;
  };

languageList = ['English', 'Spanish']
languageList.map(language => this.renderToolTip(language));

Expected: line break for each text, Can anyone help?

Answer 1

You can wrap your title with a span and add a style to it just like below:

<Tooltip
  title={<span style={{ whiteSpace: 'pre-line' }}>{tipText}</span>}
  placement="left"
  classes={{
    tooltip: classes.tooltip,
  }}>
    <IconButton>
      <InfoOutlined />
    </IconButton>
</Tooltip>

Now, when your text includes \n anywhere, it will break the line. For example you can have a text like the following:

Hey there,\nCome here

This will be rendered like:

Hey there,
Come here