web-dev-qa-db-ja.com

Reactでbootstrapツールチップを使用するにはどうすればよいですか？

以前にツールチップが機能していて、コンポーネントを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(); ?
}

しかし、これはどれも機能していないようです。ツールチップが表示されません。

javascripttwitter-bootstrapreactjstooltip
9
Ryan Peschel

私は問題を見つけました。 _data-toggle_とtitleを間違った要素に配置していました（代わりにラベルに配置する必要があります）。また、$(this.refs.test).tooltip();は正常に機能します。

3
Ryan Peschel

Refs/React DOMを使用せずに、data-toggle属性でツールチップを選択できます。

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

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

ソース： ブートストラップドキュメント

CDNでjQueryをロードしている場合は、window。$で参照することもできます。

16
devonj

私はそれが古い質問であることを知っていますが、bootstrap/jquery/reactの副作用を避けるために、ツールチップが必要な場合は、これを使用してください：

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

使い方はとても簡単で、reactプロジェクトのbootstrap tooltipよりもうまく機能します

4
Guillaume Harari

実際の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();
1
webdeb

ReactはDOMに書き込むだけなので、他の人と衝突する可能性のある変更を認識できないため、実際のReactコンポーネントを使用するとよいでしょう。

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/ からの例）

0
shaedrich