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?

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?

• javascript
• reactjs
• bootstrap-popover

• Checkout reactstrap: reactstrap.github.io/ponents/popovers – Pop-A-Stash Commented Jul 23, 2018 at 20:11
• Or React-Bootstrap react-bootstrap.github.io/ponents/popovers – lsimonetti Commented Jul 23, 2018 at 20:20

2 Answers 2

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

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

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 ponent

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

Make sure you import jquery top of the file

import $ from 'jquery'