Reactjs 如何为材质UI图标按钮的工具提示文本设置多行？

我想使用具有工具提示属性的材质UI的图标按钮组件。但是，我的工具提示值是一个长字符串。如何将我的字符串设置为在多行上读取，而不是在工具提示弹出文本中仅读取一行

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>

const longestencefortooltop=“这是一个非常长的提示，我想将其设置为多行，这样我就不会有一行非常长的提示在我的视图中出现，因为这会让人讨厌”
信息概要

更新：

我的代码如下所示：

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>

const toolTipText=（text）=>(
);
信息概要

---

现在，文本在不同的行上被拆分，但浮动在图标上，而不是图标上方。我试图使用CSS将文本定位在图标上方，但没有成功。有人知道如何使用position:relative set操作元素的位置吗？

您可以创建一个新类，如

换行

，然后添加css属性

空白：pre-line

，以便将

\n

解释为换行。 下面是一个简单的例子：

在您的特定情况下，可以将

空白

内联到

IconButton

的style属性中

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>

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>

请注意，material ui中图标按钮的

工具提示
属性是一个节点类型，因此它可以包含数字、字符串、元素或包含这些类型的数组（或片段）

因此，除了传递长字符串，您还可以传递另一个组件/元素，例如一组分割该长文本字符串的div：

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>

const longSentenceForToolTop=
这是一个很长的提示，我想设置它
到多行，所以我没有一个真正的长
线作为我的提示穿过我的视图，因为那样会
讨厌
您可以将任何想要的元素放入工具提示中，而不仅仅是文本：

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

这是一个很好的建议，但是被解释为换行符的建议没有任何效果-所有文本仍然是一行。关于你的其他建议，它确实有效，因为现在我在工具提示文本中有多行。但是，当我将鼠标悬停在图标周围时，弹出的工具提示文本会出现——这是不正确的行为。只有当我的鼠标悬停在图标上时，文本才会出现，而不是在
longSentenceForToolTip
的html上。我已使用另一种方法更新了我的注释，将文本作为带有内联样式div的节点插入。关于第二种方法的问题，请注意，材质设计指南建议工具提示保持简洁，并且没有丰富的内容。不遵守这些原则可能会导致材质UI组件的意外呈现。在工具提示中设置div的样式很有帮助。我使用带“pre”的whiteSpace属性一个接一个地定位换行符。然而，现在我有一个不同的挑战。消息完全弹出在图标上方，而不是在图标上方。此外，我正在努力将信息定位在图标元素之上。
<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>