Bootstrap Popover : open one popover with 2 different links

Question

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

Theophilus Omoregbee · Accepted Answer · 2016-08-01T17:08:11.420

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

That's great! There's just a little problem. If you open the popover with the 1st link you can't close it with the second link (but it toogles fine with many links as you can see : http://www.bootply.com/2E5aFtCHPO) — Pierrou, Aug 01 '16 at 16:19
you can make the popover dismissable `data-trigger="focus"` when the mouse is out, let me check on how to make it toggle though — Theophilus Omoregbee, Aug 01 '16 at 16:33
Editted the snipet to help out with it, with toggle on each of the link to affect the initial or main popover — Theophilus Omoregbee, Aug 01 '16 at 16:59
`hide` and `show` works perfectly than the toggle which automatically does that — Theophilus Omoregbee, Aug 01 '16 at 17:09

score 0 · Answer 2 · answered Jul 12 '18 at 11:23

This Is actually does the same wright, the content shows on 1st link only still.

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

Bootstrap Popover : open one popover with 2 different links

2 Answers2