如何在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(); ?
}

但这似乎都没有奏效.工具提示未显示.

Answer 1

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

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

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

来源:Bootstrap文档

注意,如果您通过CDN加载jQuery,您可以通过窗口引用它.$.

Answer 2

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

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

它非常易于使用，并且比 React 项目中的引导工具提示效果更好

Answer 3

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