动态添加标题到 Bootstrap 弹出窗口

Question

我正在使用 ReactJS 和 bootstrap 在按钮上创建弹出窗口。当用户停留在此按钮上 2 秒时，此弹出窗口的内容和标题必须更改。问题是在这 2 秒之前，弹出窗口没有标题。因此，当我同时更改标题和内容时，它们会在 html 中更改，但标题会保留其先前的 "display:none" 值。所以即使它在 html 中是正确的，我也无法在屏幕上看到它。

如果我在更改弹出窗口之前给它一个标题，那么一切正常。内容和标题都已更新并可见。

如何向创建的 bootstrap 弹出窗口动态添加标题？

这是我的代码：

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>

Answer 1

我终于找到了使用 react-bootstrap 和 OverlayTrigger 的解决方案（它也适用于简单的 Overlay）：

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

Overlay添加属性shouldUpdatePosition={true}非常重要。此属性不是文档的一部分，但经过深入研究后我发现了它。这允许 Popover 在内容被修改时正确地更新它的位置。

动态添加标题到 Bootstrap 弹出窗口

Dynamically ADD a title to a Bootstrap popover

javascript

reactjs

bootstrap-popover