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

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文檔

注意，如果您通過CDN加載jQuery，您可以通過窗口引用它。$。

Answer 2

我發現了問題。 我把data-toggle和title放在錯誤的元素上（它應該放在標簽上）。 另外， $(this.refs.test).tooltip(); 工作良好。

Answer 3

我知道這是一個老問題，但為了避免使用bootstrap / jquery / react的副作用，如果你想要工具提示，請使用：

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

它比反應項目中的bootstrap工具提示更易於使用和工作

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