Bootstrap popover is not working

Question

The bootstrap popover is not showing up my page

Here is my HTML:

<button type="button" class="btn btn-lg btn-danger" 
        data-toggle="popover" title="Popover title"
        data-content="And here's some amazing content. It's very engaging. Right?">
     Click to toggle popover
</button>

Here are all the js and css files I've added:

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/bootstrap.min.css")
@Styles.Render("~/Content/bootstrap.css")
@Styles.Render("~/Content/bootstrap-theme.css")
@Styles.Render("~/Content/css/default.css")

@Scripts.Render("~/Scripts/jquery-2.1.1.js")
@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/Scripts/bootstrap.js")

Can someone tell me where is the problem?

PS: Is there a way to get the popover to work without having to write any script code?

Solution 1

From the Docs on Popovers:

Opt-in functionality:
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

So you must call .popover() manually in JavaScript like this:

$("[data-toggle=popover]").popover();

Or you can use whatever selector you want

Here's an example using StackSnippets.

$("[data-toggle=popover]").popover();

body {
  padding: 50px;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-lg btn-danger" 
        data-toggle="popover" title="Popover title" 
        data-content="And here's some amazing content. It's very engaging. Right?">
  Click to toggle popover
</button>

Note: This is similar to the answer to Bootstrap Tooltip Not Showing Up

Solution 2

Although the accepted answer is fine, when dealing with popovers, please be careful of situations with double initialization as well (Fiddle example). The below JavaScript will fail.

<br/>
<br/>
<a href="#" id="firstButton" class="btn btn-primary" rel="popover" data-message="Message">Click Me (Working)</a>
<br/>
<br/>
<a href="#" id="secondButton" class="btn btn-primary" rel="popover" data-message="Message">Click Me (Failing)</a>

If you double-initialize and your popover uses values that may change or custom content, etc., you will be in a world of hurt:

$(function () {
    $('#firstButton').popover({
      container: "body",
      html: true,
      content: function () {
        return '<div class="popover-message">' + $(this).data("message") + '</div>';
      }
    });
    $('#secondButton').popover(); // <-- The first initializer does this, which causes the next one to fail on the next line.
    $('#secondButton').popover({
      container: "body",
      html: true,
      content: function () {
        return '<div class="popover-message">' + $(this).data("message") + '</div>';
      }
    });
});

Comments

[Rodrigo de Farias]

I copy and paste your code in my page and i get the follow erro : $(document).ready(function () { $("#teste").click(function () { $("[data-toggle=popover]").popover();// 'undefined is not a function' });

[KyleMit]

a), you don't need to nest the popover initialization inside of the click function. It should happen immediately on page load. b) undefined is not a function is usually a sign that you're not pulling in the libraries you think you are. Since we can't see what's going on inside of the @Scripts.Render on your machine, it's tough to say exactly, but my guess is that it's not finding the right files. You can try adding the normal script references to jQuery and bootstrap CDNs that I have in the snippet. If those work, you know your scripts are not loading correctly.

[Rodrigo de Farias]

I put all scripts after the tag </html> and it worked. I don't know what happened.

[brsfan]

This "warning" from Alexandru is critical to heed. Be especially careful if you have a generic .js library where you always opt-in popovers with $('[data-toggle="popover"]').popover(). Then if you want to opt-in a different popover later with different parameters, this will bite you every time.