How do I initialize the Bootstrap 4 popover in a React application?

Question

I can\'t figure out how to make popovers work, as per: https://getbootstrap.com/docs/4.0/components/popovers/.

The documentation talks about the popover support being a

Answer 1

What the documentation is trying to say that simply having an element with data-toggle="popover" will not create an instance of a popover. You need to explicitly initialise it with a javascript call.

In a non-react environment, you could add it to the document ready function, for example like this

$(document).ready(function () {
    $('.myPopoverItem').popover({
        html: true
        , trigger: 'focus'
        , content: $.proxy(this.getContent, this)
    });
}

In React though, you would need to add it to the constructor code of your object, such that it is called after render() (The elements have to be on the page).

I found this potential answer: React "after render" code? Where it recommends the componentDidMount function in which you can call the popover initialisation.

So in your React object, you would have a function

componentDidMount() {
    $('.myPopoverItem').popover({
        html: true
        , trigger: 'focus'
        , content: $.proxy(this.getContent, this)
    });
}