bootstrap-4 - Bootstrap Popover 未显示

Question

大家好。小困境，但非常令人沮丧。

我正在尝试将我的导航栏菜单变成弹出窗口以节省屏幕空间。

这是我的导航栏 html 代码:

<ul class="nav navbar-nav navbar-right" style="background-color: black;margin-right:35px;">
   <li>
       <img class="nav-cart-btn" src="~/node_modules/bootstrap-icons/icons/cart-check.svg" style="" />
       @Html.ActionLink("Cart", "Cart", "Stripe", new { @style = "display: inline-block;font-size:1.25em;font-weight:bold;" })
   </li>
   <!-- the old menu went here [just for my reference] -->
</ul>
<button id="dropdownMenuButton" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-top:5px;margin-bottom:4px;">
    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
        <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path>
        <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"></path>
    </svg>
    <span style="position:relative;top:-5px;" data-toggle="popover" data-placement="bottom" data-content="Content">Profile</span>
</button>
<ul id="profile-menu-content" style="display:none;">
     <li>@Html.ActionLink("Profile", "Index", "Manage", routeValues: new { area = "" }, htmlAttributes: new { @class = "dropdown-item" })</li>
     <li>@Html.ActionLink("My Orders", "MyOrders", "Home", routeValues: new { area = "" }, htmlAttributes: new { @class = "dropdown-item" })</li>
     <li>@Html.ActionLink("Liked Posts", "LikedPosts", "Home", routeValues: new { area = "" }, htmlAttributes: new { @class = "dropdown-item" })</li>
     <li>@Html.ActionLink("Billing", "ManageBilling", "Home", routeValues: new { area = "" }, htmlAttributes: new { @class = "dropdown-item" })</li>
     <li>
        <a href="javascript:sessionStorage.removeItem('accessToken');$('#logoutForm').submit();">Log off</a>
     </li>
</ul>

这是我的 Javascript 代码:

<script>
    $('#dropdownMenuButton [data-toggle="popover"]').popover({
           html: true,
           content: function () {
                return $('#profile-menu-content').html();
           }
     });
</script>

这是一个漂亮的 UI 视觉效果:

弹出窗口没有显示任何内容。打败我。

我想要一个基本上看起来像这样的弹出窗口(蓝色)。当我将鼠标悬停在弹出窗口上时，它应该显示菜单的内容:

非常感谢任何建议。

Answer 1

根据docs , content将显示:

if data-content attribute isn't present.

因此，解决方案应该是删除data-content来自 span[data-toggle="popover"]并以不同的方式设置列表项的样式(由于按钮上的 .btn-danger 类，目前它们是白色的)。

Working plunkr

(请注意，使用当前选择器，只需单击 <span> 即可触发菜单)