<i></i>タグを使用して破棄可能なポップオーバーを表示する方法

Question

Bootstrap 3と<i>タグを使用して、破棄可能なポップオーバーを表示したいとします。そこには<a>タグを使用できません。私のコードは以下の通りです。

<i class="fa fa-info-circle infoCirc" data-content="{{helpSrv.helpInfo['dashboardTooltipId']}}" data-toggle="popover" data-trigger="hover" id="dashboardTooltipId" data-placement="bottom"></i> 

現在、私はdata-trigger = "hover"を使用しています。しかし、私は<i>をクリックしたときにポップオーバーが来るようにdata-trigger = "focus"を使いたいと思っていて、<i>をクリックすると消えます。しかし、data-trigger = "focus"は<i>タグでは機能しません。これは<a>タグでのみ動作します。

<a>は使用できません。 data-contentが正しく送信されます。そこに問題はありません。

これを修正する方法はありますか？

Answer 1

.infoCirc {display: inline-block;} 

Answer 2

bootstrap documentationによれば、タグなしの破棄可能なポップオーバーは使用できません。このような理由から、多分、次の操作を実行してみてください。

<a href="#" data-content="{{helpSrv.helpInfo['dashboardTooltipId']}}" data-toggle="popover" data-trigger="focus" id="dashboardTooltipId" data-placement="bottom" role="button"><i class="fa fa-info-circle infoCirc"></i></a> 

あなたがJSFiddleがここで使用さ見ることができます：https://jsfiddle.net/sanity1123/f1gacehv/1/

をあなたはJSFiddleで、私もNAV-タブを使用していたし、すべてが動作していることがわかります。