CODEWITHSUNDEEP
bootstrap-4popoverbootstrap-popover
ajavad
ajavad

Reputation: 155

Bootstrap Popover is not displaying

What's up guys. Minor dilemma but pretty frustrating.

I'm trying to turn my navbar menu into a popover to save on screen real-estate.

This is my navbar html code:

<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>

And this is my Javascript code:

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

Here's a nice visual of the UI:

enter image description here

The popover isn't displaying whatsoever. Beats me.

I would like to have a popover that essentially looks like this (in blue). When I hover over the popover, it should display the contents of the menu as so:

enter image description here

Any suggestions are very much appreciated.

Upvotes: 3

Views: 1613

Answers (1)

noamyg
noamyg

Reputation: 3104

According to the docs, content will be displayed:

if data-content attribute isn't present.

Therefore, the solution should be to remove data-content from span[data-toggle="popover"] and to style the list items differently (currently they're white because of the .btn-danger class on the button).

Working plunkr

(Note that with the current selector, only a click on the <span> would trigger the menu)

Upvotes: 2

Related Questions