Bootstrap data-trigger ="focus"不起作用

Question

我在一个图标上定义了一个Bootstrap popover,如果我没有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 popover上使用属性,您需要使用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"不起作用，发生在您在锚点或跨度中使用 popover 时。 （当您使用 popover for button 时，data-trigger="focus" 正常工作）。

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

• tabindex="0" 出现一个边界
• tabindex="-1" 出现没有边框

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