Динамически ДОБАВЛЯТЬ заголовок во всплывающее окно Bootstrap

Я использую ReactJS и bootstrap для создания всплывающего окна над кнопкой. Когда пользователь остается над этой кнопкой в ​​течение 2 секунд, содержимое и заголовок этого всплывающего окна должны измениться. Проблема в том, что до этих 2 секунд у всплывающего окна нет заголовка. Поэтому, когда я меняю и заголовок, и содержимое, они меняются в html, но заголовок сохраняет свое предыдущее значение «display: none». Поэтому, даже если это правильно в html, я не вижу его на экране.

Если я даю заголовок всплывающему меню перед его изменением, то все работает нормально. И содержимое, и заголовок обновляются и отображаются.

Как я могу динамически ДОБАВИТЬ заголовок во всплывающее окно начальной загрузки, которое было создано без заголовка?

Вот мой код:

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}
            />
        )
}

и когда я обновляю значение this.state.content или this.state.title, я вызываю:

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

Когда я просматриваю html страницы, я получаю это для заголовка всплывающего окна:

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