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

user_9591860 0
Viewed 3701

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?

material-ui reactjs css html javascript
2 Answers

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
user_78412530

Yes, you can

Refer to the official document of materia-ui customized-tooltips

Try it online: https://stackblitz.com/run?file=demo.js

You can add customized HTML content via props title.

<Tooltip
  title={
    <>
      <Typography color="inherit">Line one</Typography>
      <Typography color="inherit">Line two</Typography>
    </>
  }
>
  <Button>HTML</Button>
</Tooltip>

Since you can write almost whatever you want inside of it, it shouldn't be a problem.

user_118722460
Related