为 Bootstrap 弹出框动态添加标题答案

【问题标题】：Dynamically ADD a title to a Bootstrap popover为 Bootstrap 弹出框动态添加标题
【发布时间】：2023-03-20 18:41:02
【问题描述】：

我正在使用 ReactJS 和 bootstrap 在按钮上创建一个弹出框。当用户在此按钮上停留 2 秒时，此弹出框的内容和标题必须更改。问题是在这 2 秒之前，弹出框没有标题。因此，当我同时更改标题和内容时，它们会在 html 中更改，但标题保持其先前的“显示：无”值。所以即使它在 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>

【问题讨论】：

这可能很愚蠢，但内联样式会覆盖类，所以如果你把 display:none 放在一个类上然后更改类，你可能会解决问题
我想过，但我有很多这样的弹出窗口。我怎样才能只定位与当前弹出框相关的那个？
你已经在这样做了。当你使用“这个”时。您正在引用调用您的函数的对象

标签： javascript reactjs bootstrap-popover

【解决方案1】：

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

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

将属性 shouldUpdatePosition={true}添加到叠加层非常重要。此属性不是文档的一部分，但我在扩展研究后发现了它。这允许 Popover 在修改内容时正确更新其位置。

【讨论】：