在`react-tooltip`中显示多行文本

Question

我使用这个库：https://www.npmjs.com/package/react-tooltip。我的文本太长了，只在一行上，如何将其放到多行上？

<p data-tip="hello world">Tooltip</p>
<ReactTooltip className="tooltip"/>

.tooltip {
  width: 100px;
}

- Umbro

---

请使用react-tooltip的multiline:true属性或html属性。详见https://www.npmjs.com/package/react-tooltip。 - Kannan G

@KannanG <ReactTooltip className="tooltip" multiline={true} /> 但它不起作用。 - Umbro

<span data-tip='tooltip<br />multiline'></span> <ReactTooltip multiline={true} /> - Kannan G

尝试像上面的例子一样进行实验。 - Kannan G

Answer 1

您可以使用html={true}或multiline={true}属性来处理多行场景

html

var tooltiptest = 'this is <br /> a test';

<div data-tip={tooltiptest} data-for='path'>Path</div>

<ReactTooltip id='path' type='light' html={true} />

你的例子：

<p data-for='path' data-tip="hello <br /> world">Tooltip</p>
<ReactTooltip id='path' className="tooltip" html={true} />

.tooltip {
  width: 100px;
}

多行

<span data-tip='tooltip<br />multiline'></span>

<ReactTooltip multiline={true} />

你的例子

<p data-tip="hello <br /> world">Tooltip</p>
<ReactTooltip className="tooltip" multiline={true} />

.tooltip {
  width: 100px;
}

来源 - 参考1参考2

如果您需要处理动态驱动内容的单词换行，请按照以下样式进行。

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import ReactTooltip from "react-tooltip";

const styles = theme => ({
  overrideMe: {
    width: "100px",
    "word-break": "break-all",
    "overflow-wrap": "break-word",
    display: "block"
  }
});

class Opener extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

  render() {
    const { classes } = this.props;
    return (
      <div>
        <div>test content</div>
        <div>test content</div>
        <div>
          <p
            data-for="tt"
            data-tip="hello ccsdcssd csdccdsc ccdc sdcscds world"
          >
            Tooltip - hover me
          </p>
          <ReactTooltip
            className={classes["overrideMe"]}
            data-html={true}
            insecure={true}
            multiline={true}
            id="tt"
          />
        </div>
      </div>
    );
  }
}

export default withStyles(styles)(Opener);

与代码互动 - 代码沙盒

- Kannan G

---

我无法分割文本 <br/> 因为我拥有由 Api 服务器返回的数据。 - Umbro

实际上在你的情况下，你不知道在哪里分割这行，对吧？我的意思是，如果服务器发送给你一个大段落，你不知道它被分成了哪些部分，以及它在用户界面中如何组织？我说得对吗？ - Kannan G

然后您需要控制<p>标签的宽度来处理空间并使单词换行 - 参考 - https://github.com/mui-org/material-ui/blob/master/docs/src/pages/components/tooltips/VariableWidth.js - Kannan G

明白了，给我几分钟，我会处理并给您解决方案。看起来我们需要控制工具提示的CSS以处理换行。 - Kannan G

是的，我试过了，可以运行。抱歉没有及时回复你。我正在更新我的答案，请检查。 - Kannan G

Answer 2

如果您要为组件或HTML元素添加样式，请在CSS中添加white-space: pre-wrap;。

- Noah Novick

Answer 3

不好：

data-tooltip-content={tooltipContent}

好的。这个使用标准的HTML来保留多行文本，使用<br/>标签。

data-tooltip-html={tooltipContent}

- Jeremy Thompson