Pierrou Pierrou - 4 months ago 20
Javascript Question

Bootstrap Popover : open one popover with 2 different links

Hi (and sorry if my english is not that right),

I'm trying to toggle the same popover but with 2 different links.

For example :

1st link - Popover is attached to it

2nd link - Can open the popover on the 1st link

I tried to do it :

<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 the popover on the first link)</a>


But it doesn't work, it duplicate the popover.

There is my Bootply : http://www.bootply.com/jAGRX9hm1a

Thank you

Answer

$(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>


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a class="pop-contact2" type="button"   id="contact">2nd link</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a class="pop-contact2"   type="button"   id="contact">3nd link</a>

Comments