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

我之前有工具提示，并且正在尝试将我的组件迁移到 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(); ?
}

但这些似乎都不起作用。工具提示未显示。

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

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

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

Source: 引导文档 http://getbootstrap.com/javascript/#tooltips

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