how to use bootstrap 5 popover in reactjs components

Question

I have seen many videos where people activate bootstrap 5 popovers using

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

in just HTML file. I haven't found any blogs or videos where people activate the popover in reactjs files. Please suggest me some examples..I am really stuck in my given task because of this popover. please someone suggest me a good example.

Answer 1

I know this post is a couple months behind, but I was also having a hard time finding a example of this. After a couple of hours I ended up figuring it out.

Here is what I found to work: install bootstrap with npm install bootstrap

In your Index.js file include:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';

In the page or component you want to use the popover include:

import { Popover } from 'bootstrap/dist/js/bootstrap.esm.min.js';

With useEffect include:

useEffect(() => {
    Array.from(document.querySelectorAll('button[data-bs-toggle="popover"]'))
      .forEach(popoverNode => new Popover(popoverNode))
})

And finally in your return use whatever will trigger the popover:

<button type="button" 
        class="btn btn-dark me-2" 
        data-bs-container="body" 
        data-bs-toggle="popover" 
        data-bs-placement="left" 
        title="I am popover"
        data-bs-content="Left popover">
              Popover on left
</button>

I have a working example in codepen but do not simply copy/paste from codepen because it follows a different rule when it comes to importing:

Popover Snippet

Resources that helped me:

How to import Popover

Similar StackOverflow Question

Bootstrap 5 Popover Documentation