13

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

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

4

5 回答 5

21

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

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

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

来源：引导文档

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

于 2017-06-13T23:01:56.517 回答
8

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

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

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

于 2018-12-17T11:21:18.470 回答
3

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

于 2015-11-16T21:29:56.257 回答
3

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

于 2018-01-31T14:37:18.067 回答
1

你需要得到真正的 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();
于 2015-11-11T17:26:36.847 回答