Bootstrap поповер: открыт один поповер с 2-х различных звеньев

Question

Привет (а жаль, если мой английский не так ли),

Я пытаюсь переключить же поповер, но с 2-мя различными связями.

Например:

первая ссылка - поповер прилагается к нему

вторая ссылка - Может открыть поповер на 1-й линии

Я пытался сделать это:

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

Но он не работает, он дублирует popover.

Существует мой Bootply: http://www.bootply.com/jAGRX9hm1a

Спасибо

Answer 1

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