如何在React中使用bootstrap工具提示？ [英] How do use bootstrap tooltips with React?

问题描述

我的工具提示工作较早，我正在尝试将我的组件迁移到React。我还没有使用react-bootstrap，因为我不确定我是否会去，因为它仍处于大量开发阶段，而不是1.0。

I had tooltips working earlier and am trying to migrate my component to React. I'm not using react-bootstrap yet because I'm not sure if I'm going to because it's still under heavy development and not 1.0 yet.

这是一个片段我的渲染代码是什么样的：

Here's a snippet of what my render code looks like:

<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" />

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

I know you have to call the tooltip function to get it to show up and I think that's where I'm messing up. I'm currently trying something like this:

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

但这似乎都不起作用。工具提示没有显示。

But none of this seems to be working. The tooltip isn't showing up.

推荐答案

我发现了问题所在。我把数据切换和标题放在错误的元素上（它应该放在标签上）。另外， $（this.refs.test）.tooltip（）; 工作正常。

I found out the problem. I was putting the data-toggle and title on the wrong element (it should go on the label instead). Also, $(this.refs.test).tooltip(); works fine.

这篇关于如何在React中使用bootstrap工具提示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！