CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrappopover
Terri Swiatek
Terri Swiatek

Reputation: 487

How to get multiple popovers on one twitter-bootstrap html page to work

I getting an HTML page going with twitter-bootstrap. I've been able to get the tooltips and popovers working and have been able to add some custom CSS styles to the popovers.

Now I am trying to add 3 buttons to the page that trigger 3 popovers on click.

I've added this code to each of the 3 buttons:

<a class="btn btn-default" href="#" role="button" id="st-popover" data-toggle="popover" rel="popover" title="<strong>Ideal for:</strong> Clients who no longer need an equity line of credit and are in a financial position to begin repaying their balance with the new monthly payments.<br /><br /><strong>What:</strong> Begin to pay off the balance of your existing equity line of credit when the draw period ends.<br /><br /><strong>Get started:</strong> Continue to make regular payments under the repayment period terms of your existing home equity line of credit; no further action is required." data-placement='bottom' data-html='true'>Learn More</a>

But the problem seems to be that only the first button popover in the DOM triggers on click. The other two just sit there doing nothing.

This is my scripts at the bottom:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="dist/js/tooltip.js"></script>
<script src="dist/js/popover.js"></script>
<script>
$(function(){
        $('#st-popover').popover();
});
</script>

Any help getting the 3 to work on one page or any resources to look at would be appreciated, thanks.

Upvotes: 0

Views: 2912

Answers (1)

bogeylicious
bogeylicious

Reputation: 5170

When jQuery uses an id as a selector, it will stop searching after it finds the first. Since there are multiple btn's, use a class instead of an id.

So try changing id="st-popover" to class="st-popover"

And $('.st-popover').popover();

Upvotes: 1

Related Questions