Как сделать разрыв строки для заголовков подсказок в Material-UI

Question

Я использую компонент ToolTip, у меня есть два текста для заголовка, просто интересно, можно ли отобразить их как две строки (каждый язык в одной строке), а не как одну строку? Как я могу применить ожидаемый стиль к этому компоненту?

Вот код:

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));

Ожидается: разрыв строки для каждого текста, кто-нибудь может помочь?

Answer 1

Вы можете заключить заголовок в span и добавить к нему стиль, как показано ниже:

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

Теперь, когда ваш текст включает в себя \n в любом месте, он будет разбивать строку. Например, у вас может быть текст, подобный следующему:

Hey there,\nCome here

Это будет отображаться как:

Hey there,
Come here

Answer 2

Да, вы можете

См. Официальный документ materia-ui custom-tooltips

Попробуйте в Интернете: https://stackblitz.com/run?file=demo.js

---

Вы можете добавить customized HTML content с помощью реквизита title .

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

Поскольку вы можете писать в нем почти все, что захотите, делать это не следует быть проблемой.