How do use bootstrap tooltips with React? How do use bootstrap tooltips with React? reactjs reactjs

How do use bootstrap tooltips with React?


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.


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


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.