40

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?

KyleMit
  • 30,350
  • 66
  • 462
  • 664
Rodrigo de Farias
  • 657
  • 2
  • 8
  • 20

6 Answers6

132

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

Community
  • 1
  • 1
KyleMit
  • 30,350
  • 66
  • 462
  • 664
  • 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' }); – Rodrigo de Farias Oct 25 '14 at 14:56
  • 1
    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. – KyleMit Oct 25 '14 at 15:11
  • 1
    I put all scripts after the tag

    and it worked. I don't know what happened.

     – Rodrigo de Farias Oct 25 '14 at 17:06
15

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>';
      }
    });
});
Alexandru
  • 12,264
  • 17
  • 113
  • 208
  • 7
    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. – brsfan Mar 30 '17 at 20:46
1

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>
Liakat Hossain
  • 1,288
  • 1
  • 13
  • 24
1

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
});
infomasud
  • 2,263
  • 1
  • 18
  • 12
0

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

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.

PKS
  • 618
  • 1
  • 7
  • 19