CODEWITHSUNDEEP
twitter-bootstrapasp.net-mvc-4
Robert
Robert

Reputation: 4406

Twitter bootstrap rel="popover" with data-content not displaying the popover

I am trying to get whatever is in the data-content section of the anchor tag to show as a popover menu. I had it working before when I tested it but now I cannot get the data to display and the only thing I did was add more items to the list that comes in as a model. Anyone know why my popover is not working?

@helper CreateSubMenu(MenuItem[] menuItems)
{
foreach (var Item in menuItems)
{

    <li><a href="#" id="@Item.HtmlId" rel="popover" data-content="@Item.Description">@Item.Name</a>
        @if (Item.MenuItems.Any())
        {
            @WrapWithUl(Item.MenuItems)
        }
    </li>
}
}
@helper WrapWithUl(MenuItem[] menuItems)
{ <ul>
  @CreateSubMenu(menuItems)
</ul> }


<div class="pull-left demo-dd demo-container span3">

<strong>
    <ul id="drilldown-3">
        @CreateSubMenu(Model.MenuItems)
    </ul>
</strong>
</div>

    <script type="text/javascript">
        $(document).ready(function($){

            $('#drilldown-3').dcDrilldown({
                speed           : 'fast',
                saveState       : false,
                showCount       : false,
                linkType        : 'breadcrumb'
            });
        });

    </script>

Here are my imports in the _layout.cshtml file

    <head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/css/bootstrap/bootstrap.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/css/site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/css/base-admin.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/css/base-admin-responsive.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/css/fontAwesome/font-awesome.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/css/dcdrilldown.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/css/skins/demo.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/DataTables-1.9.4/media/css/demo_table.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery-migrate-1.1.1.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.cookie.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.dcdrilldown.1.2.js")"></script>
    <script src="@Url.Content("~/Scripts/bootstrap.js")"></script>
    <script src="@Url.Content("~/Scripts/excanvas.min.js")"></script>
    <script src="@Url.Content("~/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.min.js")"></script>
</head>

Upvotes: 1

Views: 1898

Answers (2)

Andrew Potts
Andrew Potts

Reputation: 1

I found that the example needed the trigger option setting within an ASP.NET MVC5 example. It defaulted to 'Click'

$("#myID").popover({ container: 'body', trigger: 'hover' });

Upvotes: 0

Syliddar
Syliddar

Reputation: 83

You need to add container: body

$('a[rel=popover]').popover([container: 'body'});

Upvotes: 1

Related Questions