如何仅更新Popover的data-content中的部分内容？

可以实现仅修改data-content中的指定文本，核心思路是同时更新原始元素的data-content属性和当前显示的popover DOM内容（如果popover处于显示状态），具体实现如下：

修改后的完整代码 #

<div class="popover-wrapper">
    <i class="glyphicon glyphicon-question-sign hover_content"
       id="popover_help"
       data-toggle="popover"
       data-placement="right"
       data-content="<p>Some static text
                    <span class='update-text'>Dynamic text to update</span>
                    </p>"
       data-html="true">
    </i>
</div>
<button class="update-popover" onClick="updatePopoverContent()">Click to update</button>
<script>
    function updatePopoverContent() {
        const $popoverTrigger = $('.popover-wrapper .hover_content');
        const newText = '新的动态文本'; // 替换为你需要的目标文本

        // 1. 更新原始data-content属性中的目标文本
        const currentContent = $popoverTrigger.attr('data-content');
        // 用临时DOM容器解析HTML，避免直接字符串替换的格式问题
        const tempContainer = $('<div>').html(currentContent);
        tempContainer.find('.update-text').text(newText);
        $popoverTrigger.attr('data-content', tempContainer.html());

        // 2. 如果popover当前处于显示状态，直接更新页面上的popover内容
        const popoverInstance = $popoverTrigger.data('bs.popover');
        if (popoverInstance && popoverInstance.tip().is(':visible')) {
            popoverInstance.tip().find('.update-text').text(newText);
        }
    }

    // 初始化popover的代码保持不变
    $(".hover_content").popover({
        trigger: "manual",
        animation: false,
        delay: {
            "hide": 30
        }
    }).on("mouseenter", function() {
        var _this = this;
        $(this).popover("show");
        $(".popover").on("mouseleave", function() {
            $(_this).popover('hide');
        });
    }).on("mouseleave", function() {
        var _this = this;
        if (!$(".popover:hover").length) {
            $(_this).popover("hide");
        }
    });
</script>

关键说明 #

• 解析HTML修改文本：通过临时DOM容器解析data-content的HTML字符串，能精准定位到.update-text元素修改内容，避免直接字符串替换可能破坏HTML结构的问题。
• 同步显示状态的popover：Bootstrap Popover显示后会生成独立DOM节点，修改原始触发元素的data-content不会自动刷新已显示的popover，因此需要直接操作popover的DOM节点。
• 版本兼容：该方案适配Bootstrap 3/4版本；若使用Bootstrap 5，需将实例获取方式调整为$popoverTrigger.get(0)._popover。

内容的提问来源于stack exchange，提问作者Vovka Yemelyanov