Bootstrap Popover无法显示，导航栏菜单转弹出层功能实现求助

1. 移除冲突的下拉菜单属性 #

你的按钮#dropdownMenuButton上自带data-toggle="dropdown"等下拉菜单相关属性，会和内部span的popover事件产生冲突，直接删除按钮上的以下属性即可：
data-toggle="dropdown"、aria-haspopup="true"、aria-expanded="false"

2. 确认依赖引入顺序正确 #

Bootstrap Popover 依赖以下三个库，必须严格按照顺序引入：

• 先引入jQuery
• 再引入Popper.js
• 最后引入Bootstrap.js

3. 修正Popover初始化配置 #

你需要把初始化代码放在DOM加载完成的回调里，同时添加悬停触发的配置，修改后的JS代码如下：

<script>
// 等待DOM完全加载后再初始化
$(function () {
    $('#dropdownMenuButton [data-toggle="popover"]').popover({
        html: true,
        // 配置悬停+聚焦时触发，移开后自动消失
        trigger: 'hover focus',
        // 调整弹出位置避免偏移
        placement: 'bottom',
        content: function () {
            return $('#profile-menu-content').html();
        }
    })
})
</script>

如果以上操作后仍未生效，可以在初始化代码前打印目标元素长度，确认DOM选择器正确：console.log($('#dropdownMenuButton [data-toggle="popover"]').length)，如果输出为0说明选择器写错或者DOM未加载完成。

4. 添加蓝色Popover自定义样式 #

要实现你要的蓝色主题弹窗，添加以下CSS即可：

/* 弹窗主体蓝色样式 */
.popover {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}
/* 弹窗底部箭头蓝色样式 */
.bs-popover-bottom>.popover-arrow::after {
    border-bottom-color: #0d6efd;
}
.bs-popover-bottom>.popover-arrow::before {
    border-bottom-color: #0d6efd;
}
/* 弹窗内链接样式适配 */
.popover .dropdown-item {
    color: #fff;
    background: transparent;
}
.popover .dropdown-item:hover {
    background: rgba(255,255,255,0.1);
}

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