ブートストラップポップオーバー機能

Question

ブートストラップポップオーバーが2つあり、サイドパネルを開くことができるはずです。

またJSFiddle にhttps://jsfiddle.net/bob_js/eLLaacju/

を、関連するコードを見つけてください、私は以下の問題を達成したい： ポップオーバーは、データ・トリガ=「ホバー」を開いて、私達ができるならば、それは内のコンテンツを持っているとして滞在する必要がありますテキスト（Click Me）をクリックするとサイドパネルが開きます。 data-trigger = 'focus'は役に立ちません。

私に助けてください、それに関連するコードはありますか？

HTML

<i id="popover-a" class="circle-macro" tabindex="0" data-container="body" data-html="true" data-trigger="focus" data-toggle="popover" data-placement="right">i</i> 

<div id="popover-content-a" class="hidden"> 
<div> 
    <h6><b>Heading</b></h6> 
    <p>Content <a href="#">Click Me</a></p> 
</div> 
</div> 


<i id="popover-b" class="circle-macro" tabindex="1" data-container="body" data-html="true" data-trigger="focus" data-toggle="popover" data-placement="right">i</i> 

<div id="popover-content-b" class="hidden"> 
<div> 
    <h6><b>Heading</b></h6> 
    <p>Content <a href="#">Click Me</a></p> 
</div> 
</div> 

のjQuery：

$(function() { 
    $("#popover-a").popover({ 
    html: true, 
    content: function(){ 
     return $('#popover-content-a').html();  
    } 
    }); 
    $("#popover-b").popover({ 
    html: true, 
    content: function(){ 
     return $('#popover-content-b').html();  
    } 
    }); 
}) 

CSS：

.hidden{ 
display: none; 
} 

Answer 1

以下のコードは、私を助け：

$(function() { 
    $("#popover-a").popover({ 
    html: true, trigger: 'click hover', delay: {show: 50, hide: 4000}, 
    content: function(){ 
     return $('#popover-content-a').html();  
    } 
    }); 
    $("#popover-b").popover({ 
    html: true, trigger: 'click hover', delay: {show: 50, hide: 4000}, 
    content: function(){ 
     return $('#popover-content-b').html();  
    } 
    }); 
})