hi (and sorry if english not right),
i'm trying toggle same popover 2 different links.
for example :
1st link - popover attached it
2nd link - can open popover on 1st link
i tried :
<a class="pop-contact" data-placement="bottom" data-toggle="popover" data-title="contact" data-container="body" type="button" data-html="true" id="contact">1st link</a> <div id="popover-content" class="hide"> test </div> <a class="pop-contact" data-placement="bottom" data-toggle="popover" data-title="contact" data-container="body" type="button" data-html="true" id="contact">2nd link (open popover on first link)</a> but doesn't work, duplicate popover.
there bootply : http://www.bootply.com/jagrx9hm1a
thank you
$(document).ready(function() { var t= $(".pop-contact").popover({ html: true, content: function() { return $('#popover-content').html(); } }); var shown=false; t.on('show.bs.popover', function () { shown=true; }); t.on('hide.bs.popover', function () { shown=false; }); $('.pop-contact2').click(function(e){ e.preventdefault(); if(shown) t.popover('hide'); else t.popover('show'); }); }); <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <a class="pop-contact" data-placement="bottom" data-toggle="popover" data-title="contact" data-container="body" type="button" data-html="true" id="contact">1st link</a> <div id="popover-content" class="hide"> test </div> <a class="pop-contact2" type="button" id="contact">2nd link</a> <a class="pop-contact2" type="button" id="contact">3nd link</a>
Comments
Post a Comment