如何在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" />

我知道你必须调用tooltip函数才能让它显示出来，而我认为这就是我出错的地方。我目前正在尝试像这样做：

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

但是似乎所有这些都没有起作用。工具提示未显示出来。

- Ryan Peschel

Answer 1

不使用refs/React DOM，您可以通过data-toggle属性选择工具提示：

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

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

来源：Bootstrap文档

注意，如果您正在通过CDN加载jQuery，则也可以使用window.$来引用它。

- devonj

---

工作得非常完美。这正是我一直寻找的准确答案。 - Chamod Pathirana

我收到了'$'未定义的错误。 - Ross Attrill

@RossAttrill，您需要安装jQuery（npm i jquery --save），然后导入它（import $ from 'jquery';）。 - Skipper

Answer 2

我知道这是一个老问题，但为了避免与bootstrap/jquery/react产生副作用，如果你想使用工具提示，请使用以下内容：

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

它非常容易使用，在react项目中比bootstrap工具提示更有效。

- Guillaume Harari

---

我认为这是React应用程序中工具提示最优雅的解决方案。非常感谢您的建议。 - Yasin Yörük

Answer 3

如果您使用真正的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/）

（这是一个段落）

- shaedrich

Answer 4

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

- Ryan Peschel

Answer 5

你需要获取真实的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();

- webdeb

---

似乎这已经被弃用了。我尝试了更新的版本和一些其他变体，但没有一个似乎起作用。 - Ryan Peschel

是的，这就是我尝试过的，但工具提示仍然没有显示出来。我想这可能与在React中未能识别data-toggle或title有关。我不确定。另外，在你的ReactDom示例中，DOM应该大写。 - Ryan Peschel

你尝试过使用console.log()打印React.findDOMNode()的结果吗？ - webdeb

不，这只是一个本地变量，它也可以是 foo ;) 另外，在你的 ReactDom 示例中，DOM 应该大写。 - webdeb

哦，是的，我只是从CDN中包含它，他们的是大写的。我会尝试记录它。编辑：是的，它被找到了，并且对象已经被记录了。 - Ryan Peschel