ブートストラップ・ポップ・オーバーにはいくつかの機能が必要です

Question

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

また、私は以下の問題を達成したかったJSFiddle https://jsfiddle.net/bob_js/eLLaacju/の関連コード

見つけてください：ポップオーバーはdata-trigger="hover"に開いて、それは我々がテキストをクリックすることができればそのコンテンツを持っているように滞在する必要があり、それを（私をクリックしてください）サイドパネルを開く必要があります。 data-trigger="focus"も役に立ちません。

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

HTML：

<div> 
Title 
</div> 
<div class="container"> 
<i id="popover-a" class="circle-macro" tabindex="0" data-container="body" data-html="true" data-trigger="hover" 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> 
<br> 

<i id="popover-b" class="circle-macro" tabindex="1" data-container="body" data-html="true" data-trigger="hover" 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> 

</div> 

はCSS：

.circle-macro { 
    border-radius: 50%; 
    background-color: rgb(68, 104, 125); 
    color: white; 
    padding: 0 8px; 
    font-family: 'Times New Roman'; 
    font-style: italic; 
    z-index: 10; 
    cursor: pointer; 
} 
.hidden{ 
    display: none; 
} 

の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();  
    } 
    }); 
}) 

Answer 1

ちょうど私のjQueryに以下を追加すると、今の問題に役立ちます。

トリガー： 'ホバーをクリック'、遅延：{ショー：50、非表示：4000}、

$(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();  
    } 
    }); 
})