如何使用<i> </i>标记显示可禁用的弹出窗口

Question

我想使用Bootstrap 3和<i>标记显示一个不允许的popover。我不能在那里使用<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，您不能在没有标签的情况下使用不允许的popover。因此，可以尝试执行以下操作：

<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-tabs，一切正常。