CODEWITHSUNDEEP
jquerytwitter-bootstrap
Chilipepper
Chilipepper

Reputation: 182

Bootstrap popover not showing up

I'm trying to display multiple popovers i have on one page by clicking on a certain link. I will just show you an example on one div. Here's how that looks like:

$(".tutorial").on('click', function(){ 
    $('[data-toggle="popover"]').popover();
});

<li>
   <a href="#" class="tutorial">
      <span class="glyphicon glyphicon-book" aria-hidden="true"></span> 
      Tutorial Mode
   </a>
</li> 


<div data-container="body" data-toggle="popover" data-placement="right" 
     data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." 
     style="height:100%; " class="col-xs-3 label-positive" 
     data-original-title="" title="">

    <h2 style="height:100%; font-weight:bold; padding: 15px 1px 15px 1px; border-radius:5px;" class="text-center"> +3$</h2>
</div>

When i click on the div popovers show up without problems, but when i click on the link nothing happens. There's no errors in console or anything, just nothing happens

Upvotes: 1

Views: 1758

Answers (2)

Peter Girnus
Peter Girnus

Reputation: 2739

Bootstrap popovers requires manual initialization through jQuery. Add this to your .js file:

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

If you have multiple popovers on one page use this script as well to only allow one to show at a time.

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

Upvotes: 0

Scott Selby
Scott Selby

Reputation: 9580

.popover() just creates the popover() bootstrap element so that has to be somewhere, then to trigger it to show you do this:

       $(".tutorial").on('click', function(){ 
          $('[data-toggle="popover"]').popover('show');
       });

actually I may be mistaken , I think that you call .popover() to make any element a popover , but if you are using the data attribute then bootstrap.js should of already taken care of this line $('[data-toggle="popover"]').popover();

.popover('show') will show and .popover('destroy') will get rid of the popover

Upvotes: 2

Related Questions