Dynamically ADD a title to a Bootstrap popover

Question

I'm using ReactJS and bootstrap to create a popover over a button. When the user stays over this button for 2 seconds, the content and the title of this popover must change. The problem is that before these 2 seconds, the popover has no title. So when I change both the title and the content, they change in the html, but the title keeps its previous "display:none" value. So even if it is correct in the html, I can't see it on screen.

If I give a title to the popover before changing it, then everything works fine. Both content and title are updated and visible.

How can I dynamically ADD a title to a bootstrap popover that was created without a title?

Here is my code:

render()
{
        return (
            <span
                ref="popoverElement"
                className={"popover_helper"}
                onMouseOver={this.handleMouseOver}
                onMouseLeave={this.handleMouseLeave}
                data-container="body"
                title={this.state.title}
                data-content={this.state.content}
                data-placement={this.props.pos}
            />
        )
}

and when I update the value of this.state.content or this.state.title, I call:

updatePopover()
{
    const popover =  $(this.refs.popoverElement).data('bs.popover');
    popover.options.title = this.state.title;
    $(this.refs.popoverElement).popover("show");
}

When I look in the html of the page I obtain this for the title of the popover:

<h3 class="popover-title" style="display: none;">my tile</h3>

Answer 1

I finally found the solution using react-bootstrap and the OverlayTrigger (it also works with a simple Overlay):

https://react-bootstrap.github.io/components.html#popovers

It is very important to add the attribute shouldUpdatePosition={true}to the Overlay. This attribute is not part of the doc, but I found about it after extended research. This allows the Popover to update its position correctly when the content is modified.