3

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.

ajavad
  • 105
  • 11
  • Specifying both `data-content` on the element, and `content` when initialising is redundant, AFAIK, have you tried removing one or the other? [Popovers also require extra JS](https://getbootstrap.com/docs/4.6/components/popovers/), have you included all the required libs? Any errors on your devtools console? Have you tried removing the inline style on the span to make sure that's not interfering? How about moving the popover to the button, instead of the nested span? – Don't Panic Nov 15 '21 at 11:26
  • @Don'tPanic Thanks for chiming in. I removed the data-content as you suggested. I also have triple checked I am using the correct bootstrap.bundle.min.js file so we should be good on javascript & css imports for this plugin. I also tried moving the popover code to the button. It still isn't working >=/ – ajavad Nov 16 '21 at 04:37
  • [Here's a JSFiddle](https://jsfiddle.net/dont_panic/pge1ywmu/) of a simplified version of your code - it works fine. Changes I made: 1) Replaced all the `@Html.ActionLink` with plain HTML; 2) Remove inline JS; 3) Remove redundant `data-content="Content"`; 4) Slotted your code into BS4 default navbar example, and slotted that into the BS4 starter template. I wrote this up as an answer before realising it isn't an answer, it just shows that your code works fine and the problem must be elsewhere ... :-) – Don't Panic Nov 16 '21 at 11:30
  • @Don'tPanic Hey man. Thanks a lot for that. – ajavad Nov 17 '21 at 17:43
  • How should the behavior of a popover menu differ from the behavior of a [standard dropdown list](https://getbootstrap.com/docs/4.6/components/navbar/#supported-content)? They are both essentially popup-elements that appear over the page content. The dropdown list has already been made specifically for the site navigation. A white triangle along the top edge can be added using CSS. – Gleb Kemarsky Dec 12 '21 at 13:44

1 Answers1

2

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)

noamyg
  • 2,747
  • 1
  • 23
  • 44