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

您可以在tooltip内放置您想要的任何元素，而不仅仅是文字：

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

如果您不确定tooltip将会持续多长时间并且您想要强制换行，您可以使用设置div的width并强制换行（您也可以强制使用文字）在左边对齐你不希望它居中）：

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

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中，然后将其作为节点传递给{{ 1}} tooltip的属性。

IconButton

请注意，material-ui中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>的{{1}}属性是节点类型，因此它可以包含数字，字符串，元素或数组（或者片段）包含这些类型。

因此，您可以传入另一个组件/元素，而不是传入一个长字符串，例如一组div分隔那长串文本：

tooltip

Answer 3

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

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

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

3 个答案: