如何在 Material-UI 中为 ToolTip 标题换行答案

【问题标题】：How to make line break for ToolTip titles in Material-UI如何在 Material-UI 中为 ToolTip 标题换行
【发布时间】：2020-06-21 05:48:22
【问题描述】：

我正在使用 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));

预期：每个文本都换行，有人可以帮忙吗？

【问题讨论】：

标签： javascript html css reactjs material-ui

【解决方案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

【讨论】：

【解决方案2】：

是的，你可以

参考materia-ui customized-tooltips的官方文档

在线试用：https://stackblitz.com/run?file=demo.js

您可以通过道具title添加customized HTML content。

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

因为你几乎可以在里面写任何你想要的东西，这应该不是问题。

【讨论】：