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.

score 21 · Answer 1 · answered Jun 13 '17 at 23:01

21

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.

answered Jun 13 '17 at 23:01

devonj

1,198
1
13
24

Worked perfectly. This is the exact answer that I was looking for. – Chamod Pathirana Sep 05 '19 at 04:30
I get `'$' is not defined` – Ross Attrill Apr 08 '20 at 07:32
@RossAttrill, you need to install jquery (npm i jquery --save) and then import it (import $ from 'jquery'; ). – Skipper May 29 '20 at 21:34

score 8 · Answer 2 · answered Dec 17 '18 at 11:21

8

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

answered Dec 17 '18 at 11:21

Guillaume Harari

475
3
10

2

I think this is the most elegant solution for tooltip on react app. Thanks a lot for the suggestion. – Yasin Yörük Feb 20 '20 at 12:49

score 3 · Accepted Answer · answered Nov 16 '15 at 21:29

3

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.

answered Nov 16 '15 at 21:29

Ryan Peschel

11,087
19
74
136

score 3 · Answer 4 · answered Jan 31 '18 at 14:37

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

webdeb · Answer 5 · 2015-11-11T17:37:56.653

1

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

edited Nov 11 '15 at 17:37

answered Nov 11 '15 at 17:26

webdeb

12,993
5
28
44

It appears this is deprecated. I tried the updated version along with some other variants and none of them seemed to work. – Ryan Peschel Nov 11 '15 at 17:31
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. – Ryan Peschel Nov 11 '15 at 17:39
have you tried the to console.log() the result of Reacts.findDOMNode() ? – webdeb Nov 11 '15 at 17:40
>>Also DOM should be capitlized in your ReactDom example.<< No, its just a local variable it could be `foo` as well ;) – webdeb Nov 11 '15 at 17:41
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. – Ryan Peschel Nov 11 '15 at 17:43

How do use bootstrap tooltips with React?

5 Answers5

12.x

13.x

14.x

Linked