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>

It might be stupid but the inline style overrides the class so if you put the display:none on a class and then change the class you might fix the problem — Gino, Jan 26 '17 at 18:14
I thought about it, but I have many of these popover. How can I target only the one related to the current popover? — Ryan Pergent, Jan 26 '17 at 18:25
You're already doing it. when you use "this". you're referencing to the object making the call to your function — Gino, Jan 27 '17 at 20:52

score 0 · Accepted Answer · answered May 10 '17 at 09:05

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.

Dynamically ADD a title to a Bootstrap popover

1 Answers1