如何为Material UI IconButton的工具提示文本设置多行？

Question

我想使用带有工具提示属性的材质UI的IconButton组件。但是，我的工具提示值是一个长字符串。如何将我的字符串设置为多行读取，而不是工具提示弹出文本只读取一行？

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 toolTipText = (text) => (
  <div style={{lineHeight: 15px, whiteSpace: pre}}>
  </div>
);

   <IconButton
      tooltip={tipText(text)}
      tooltipPosition="top-center">
      <FontIcon
        className="material-icons">
        info_outline
      </FontIcon>
    </IconButton>

现在，文本在其不同的行上被分解，但漂浮在图标上方而不是上方。我正在尝试使用CSS将文本放置在图标上方，但没有成功。有谁知道如何用position：relative set操作元素的位置？

Answer 1

对于一个（或两个）关闭，这里是内联样式。

用 分隔您的信息并将\n其放入 div 中，并将white-space属性设置为pre-line。

const infoItems = ["line one", "line two"]
const tip = infoItems.join('\n')

<Tooltip
    title={
        <div style={{ whiteSpace: 'pre-line' }}>{tip}</div>
    }
>
    <IconButton/>
</Tooltip>

Answer 2

您可以创建一个新类line-break，然后添加 css 属性，white-space: pre-line以便将\n其解释为换行符。这是一个快速示例：

https://codepen.io/yowakita/pen/VPNxBV

在您的特定情况下，您可以将 内联whiteSpace到IconButton.

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>

编辑：看起来这并没有为你-请尝试将字符串转换为工作div与联样式，然后passsing它的一个节点tooltip的属性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>

请注意，in material-ui的tooltip属性IconButton是一个节点类型，因此它可以接收数字、字符串、元素或包含这些类型的数组（或片段）。

因此，除了传入一个长字符串之外，您还可以传入另一个组件/元素，例如一组分割该长文本字符串的 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>

Answer 3

You can put any element you want inside of tooltip, not just text:

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

If you're not sure how long the tooltip will be and you want to force line breaks, you can use set the width of the div and force word wrapping (you can also force text align to the left in you don't want it centered):

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