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.

Gingham

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.

Gingham

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.

Aggressor

Worked perfectly. This is the exact answer that I was looking for. – Autopsy

I get '$' is not defined – Tanatanach

@RossAttrill, you need to install jquery (npm i jquery --save) and then import it (import $ from 'jquery'; ). – Unconformable

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

Pears

I think this is the most elegant solution for tooltip on react app. Thanks a lot for the suggestion. – Close

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

Grassplot

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

Womankind

It appears this is deprecated. I tried the updated version along with some other variants and none of them seemed to work. – Gingham

Yeah that's what I tried and the tooltip still isn't showing up. I'm thinking it might have something to do with data-toggle or title not being recognized in React or something.. I'm not sure. Also DOM should be capitlized in your ReactDom example. – Gingham

have you tried the to console.log() the result of Reacts.findDOMNode() ? – Womankind

>>Also DOM should be capitlized in your ReactDom example.<< No, its just a local variable it could be foo as well ;) – Womankind

Oh yeah right I'm just including it from the cdn and theirs is capitalized. I'll try logging it. Edit: Yeah it's being found and the object is being logged. – Gingham