Question

我在一个图标上定义了一个Bootstrap popover，如果我没有data-trigger =＆＃34; focus＆＃34;作为其定义的一部分。当我包含它时，单击图标时不会显示弹出窗口。这是没有数据触发器的代码。

<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"属性，您需要使用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>

希望这有帮助！

Answer 2

"data-trigger="focus" 不起作用，发生在您在锚点或跨度中使用弹出框时。 （data-trigger="focus" 在您使用弹出框按钮时正常工作）。

因此，在这种情况下，您必须为锚标记或跨度标记添加 tabindex="-1" 或 tabindex="0"。

tabindex="0" 与边线一起出现
tabindex="-1" 没有边框

例如。 <a data-toggle="popover" tabindex="-1" data-trigger="focus"> Click here</a>

Bootstrap数据触发器=＆＃34;焦点＆＃34;不起作用

2 个答案: