如何在 React 中使用 bootstrap 工具提示？

Question

我之前有工具提示，正在尝试将我的组件迁移到 React。我还没有使用 react-bootstrap 因为我不确定我是否会因为它仍在大量开发中而不是 1.0 呢。

这是我的渲染代码的片段：

<span>
    <input data-toggle="tooltip" ref="test" title={this.props.tooltip}  type="radio" name="rGroup" id={"r" + this.props.name} />
    <label className="btn btn-default" htmlFor={"r" + this.props.name}></label>
</span>

并调用它：

<MyComponent name="apple" tooltip="banana" />

我知道您必须调用工具提示功能才能显示它，我认为这就是我搞砸的地方。我目前正在尝试这样的事情：

componentDidMount() {
    $(this.refs.test).tooltip();
    // this.refs.test.tooltip(); ?
    // $('[data-toggle="tooltip"]').tooltip(); ?
}

但是 none 这似乎有效。工具提示未显示。

Answer 1

您需要获得真实的 DOM 表示，请试试这个：

12.x

$(this.refs.test.getDOMNode()).tooltip();

13.x

$(React.findDOMNode(this.refs.test)).tooltip();

14.x

var ReactDom = require('react-dom');
$(ReactDom.findDOMNode(this.refs.test)).tooltip();

Answer 2

我发现了问题。我将 data-toggle 和 title 放在错误的元素上（它应该放在标签上）。此外，$(this.refs.test).tooltip(); 工作正常。

Answer 3

不使用 refs / React DOM，您可以 select 通过数据切换属性的工具提示：

componentDidMount() {
  $('[data-toggle="tooltip"]').tooltip();
}

componentDidUpdate() {
  $('[data-toggle="tooltip"]').tooltip();
}

来源：Bootstrap documentation

请注意，如果您通过 CDN 加载 jQuery，您也可以通过 window.$ 引用它。

Answer 4

如果你使用真正的 React 组件会更好，因为 React 只写入 DOM 所以它无法识别我的其他人所做的任何可能与之冲突的更改。

https://github.com/react-bootstrap/react-bootstrap

const tooltip = (
  <Tooltip id="tooltip">
    <strong>Holy guacamole!</strong> Check this info.
  </Tooltip>
);
const overlay = (
    <OverlayTrigger placement="left" overlay={tooltip}>
      <Button bsStyle="default">Holy guacamole!</Button>
    </OverlayTrigger>
);

（示例取自 https://react-bootstrap.github.io/components/tooltips/）

Answer 5

我知道这是一个老问题，但是为了避免 bootstrap/jquery/react 的副作用，如果你想要工具提示，请使用这个：

https://www.npmjs.com/package/react-tooltip

它非常易于使用，并且比 bootstrap react 项目中的工具提示更好用

如何在 React 中使用 bootstrap 工具提示？

How do use bootstrap tooltips with React?

javascript

tooltip

twitter-bootstrap

twitter-bootstrap-tooltip

reactjs

12.x

13.x

14.x