Javascript 如何将引导工具提示与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>

---

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

您需要获得真正的DOM表示，请尝试以下操作：

12.x 13.x 14.x

---

我发现了问题。我把

数据切换

和

标题

放在了错误的元素上（应该放在标签上）。另外，

$（this.refs.test）.tooltip（）工作正常。
不使用refs/React DOM，您可以通过数据切换属性选择工具提示：

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

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

资料来源：

注意，如果您是通过CDN加载jQuery，您也可以通过窗口引用它。$
 如果使用real-React组件会更好，因为React只写入DOM，因此它无法识别其他组件所做的任何可能与之冲突的更改


const工具提示=(
神圣的鳄梨酱！检查此信息。
);
常数覆盖=(
神圣的鳄梨酱！
);

（示例取自）
我知道这是一个老问题，但为了避免bootstrap/jquery/react的副作用，如果需要工具提示，请使用以下方法：


它非常易于使用，并且比react项目中的引导工具提示更有效
这似乎已被弃用。我尝试了更新的版本和其他一些变体，但它们似乎都不起作用。是的，这就是我尝试的，工具提示仍然没有显示出来。我想这可能与React中未识别的
数据切换
或
标题
有关。。我不确定。在ReactDom示例中，DOM也应该大写。您是否尝试过console.log（）来处理Reacts.findDOMNode（）的结果？>>在ReactDom示例中，DOM也应该大写。哦，是的，我只是在cdn中包含它，他们的结果是大写的。我将尝试记录它。编辑：是的，它正在被发现，并且对象正在被记录。工作得很好。这正是我所寻找的答案。我得到了
“$”没有定义
@RossAttrill，你需要安装jquery（npm I jquery--save）然后导入它（import$from“jquery”；）。我认为这是react应用程序上工具提示的最优雅的解决方案。非常感谢你的建议。
componentDidMount() {
    $(this.refs.test).tooltip();
    // this.refs.test.tooltip(); ?
    // $('[data-toggle="tooltip"]').tooltip(); ?
}

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

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

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

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

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

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>
);