twitter-bootstrap - Bootstrap 数据触发器 ="focus"不起作用

Question

我在一个图标上定义了一个 Bootstrap 弹出框，如果我没有 data-trigger="focus"作为其定义的一部分，它可以正常工作。当我包含它时，单击图标时不会显示弹出框。这是没有数据触发器的代码。

<a data-toggle="popover" data-placement="left" data-title="Membership history for Fred Smith" data-html="true" data-content="<table><thead><tr><th class='col-md-2 text-left'>Renewed</th><th>Expiration</th><th>Type</th></tr></thead><tbody><tr><td>12/09/2016</td><td>12/31/2017</td><td>1-Year Individual</td></tr></tbody></table>"><span class="glyphicon glyphicon-info-sign" style="color:grey;"></span></a>

以及包含数据触发器的代码:

<a data-toggle="popover" data-placement="left" data-trigger="focus" data-title="Membership history for Fred Smith" data-html="true" data-content="<table><thead><tr><th class='col-md-2 text-left'>Renewed</th><th>Expiration</th><th>Type</th></tr></thead><tbody><tr><td>12/09/2016</td><td>12/31/2017</td><td>1-Year Individual</td></tr></tbody></table>"><span class="glyphicon glyphicon-info-sign" style="color:grey;"></span></a>

我还应该提到该图标位于表格单元格中。

有任何想法吗？

Answer 1

使用 data-trigger="focus"您需要使用的 Bootstrap 弹出窗口属性 tabindex="0" .
像这样 - (编辑以将 tab-index 更改为 tabindex)

<a tabindex="0" data-toggle="popover" data-placement="left" data-trigger="focus" data-title="Membership history for Fred Smith" data-html="true" data-content="<table><thead><tr><th class='col-md-2 text-left'>Renewed</th><th>Expiration</th><th>Type</th></tr></thead><tbody><tr><td>12/09/2016</td><td>12/31/2017</td><td>1-Year Individual</td></tr></tbody></table>"><span class="glyphicon glyphicon-info-sign" style="color:grey;"></span></a>

希望这可以帮助!