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 documentation

注意，如果你是通过CDN加载jQuery，你可以通过窗口来引用它。$也是如此。

Answer 2

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

Answer 3

我知道这是一个老问题，但是要避免bootstrap / jquery / react带来的副作用，如果您需要工具提示，请使用以下提示：

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

它很容易使用，并且比react项目中的引导工具提示更好

Answer 4

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

Answer 5

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

的例子

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

5 个答案:

12.x的

13.x

14.x