How to use bootstrap popover with reactjs

Question

I have tried to follow the bootstrap documentation to make work a popover. But I have been unsuccessful in converting this piece of code into something React can understand.

   {
  $(document).ready(function() {
    $('[data-toggle="popover"]').popover();
  });
}

Without it my popover cannot function properly. What's the solution?

Checkout reactstrap: https://reactstrap.github.io/components/popovers/ — Pop-A-Stash, Jul 23 '18 at 20:11
Or React-Bootstrap https://react-bootstrap.github.io/components/popovers/ — lsimonetti, Jul 23 '18 at 20:20

score 3 · Answer 1 · answered Jul 23 '18 at 21:26

3

Also you can do that too, if you define jquery in index.html. Call jquery from window object.

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

answered Jul 23 '18 at 21:26

musti

31
1
1

score 1 · Answer 2 · answered Jul 23 '18 at 20:23

It make sense to use react-bootstrap library but if you still want a solution go ahead and follow this...

You need to understand react lifecycle methods instead of using document.ready callback function.

try adding this to your react component

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

Make sure you import jquery top of the file

import $ from 'jquery'

How to use bootstrap popover with reactjs

2 Answers2