How to use tooltips with React?

Question

I had tooltips working earlier and am trying to port my component to React. I am not using the bootstrap reaction yet because I'm not sure if I am going to, because it is still in heavy development, not 1.0.

Here is a snippet of my rendering code:

<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 him:

 <MyComponent name="apple" tooltip="banana" /> 

I know that you need to call the tooltip function in order for it to appear, and I think where I got confused. I'm currently trying to do something like this:

 componentDidMount() { $(this.refs.test).tooltip(); // this.refs.test.tooltip(); ? // $('[data-toggle="tooltip"]').tooltip(); ? } 

But none of this works. Tooltip is not displayed.

Answer 1

I figured out this problem. I put data-toggle and title in the wrong element (instead, it should be on the label). In addition, $(this.refs.test).tooltip(); works fine.

Answer 2

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

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

Source: Bootstrap documentation

Please note: if you download jQuery on a CDN, you can also access it from the window. $.

Answer 3

you need to get a real view of the DOM, please try:

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 4

It would be better if you used real React components, because React only writes to the DOM so that it cannot recognize any changes made by my others that I might encounter.

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.imtqy.com/components/tooltips/ )

Answer 5

I know this is an old question, but to avoid side effects when loading / jquery / respond if you want tooltips, use this:

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

It is very easy to use and works better than a tooltip in a jet project.