How do use bootstrap tooltips with React?

Question

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>

And calling it:

<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.

Answer 1

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.

Answer 2

Without using refs / React DOM, you can select tooltips by data-toggle attribute:

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

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

Source: Bootstrap documentation

Note, if you're loading jQuery by CDN, you can refer to it by window.$ as well.

Answer 3

I know it s an old question, but to avoid side effects with bootstrap/jquery/react, if you want tooltips, use this :

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

It's very easy to use and works better than bootstrap tooltip in a react project

Answer 4

It would be better if you use real React components because React only writes to the DOM so it cannot recognize any changes made my others which could clash with.

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>
);

(Example taken from https://react-bootstrap.github.io/components/tooltips/)

Answer 5

you need to get the real DOM representation, try this please:

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();