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?

Motorbike

Are you sure, your scripts included right? Can you reproduce the error on JSFiddle? – Zweig

Answer 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

Glori

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' }); – Motorbike

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. – Glori

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

Answer 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>';
      }
    });
});

Carburize

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. – Emia

Answer 3

In bootstrap 5.2 I had to use folowing jquery code to initialize the Popover.

<script>
        $(document).ready(function () {
            //initialize popover
            const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
            const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));
        });
    </script>

Emmett

Answer 4

you can add popover additionally with bootstrap or use bootstrap bundle. However popover requires to initialise manually.

HTML

Showing html content within popover. I am showing an image.

<a tab-index="0" data-content="<img src='image1.jpg' class='img-fluid' alt='Image 1'/>" data-toggle="popover" >Image 1</a>

JS.

calling with jQuery

$('[data-toggle="popover"]').popover({
  trigger: "hover click", // triggers on hover and click
  placement: 'auto', // auto or top or left or right
  container: 'body',
  title: '<span>X</span>',
  html: true
});

Capriccioso

Answer 5

One robust solution is Writing script tag of jquery, popper before bootstrap javascript.

like this,

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Venipuncture

Can you add some code showing what that would look like? – Villosity

Answer 6

So, this is what worked for me. I initially used $("[data-toggle=popover]").popover(); inside the a function just like suggested in bootstrap documentation . It was not working for me. I took the snippet out of the function and it wokred.

Bierman