如何使用<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"。但我想使用data-trigger = "focus"，以便弹出窗口在我点击<i>时出现，当我在<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-标签也和一切工作。