引导数据触发器 =“焦点”不起作用答案

【问题标题】：Bootstrap data-trigger="focus" doesn't work引导数据触发器 =“焦点”不起作用
【发布时间】：2017-07-17 01:50:27
【问题描述】：

我在一个图标上定义了一个 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>

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

有什么想法吗？

【问题讨论】：

根据我的问题，弹出框在没有数据触发器的情况下工作，并且不会使用数据触发器打开。另外，根据我包含的代码，这不是一个按钮。

标签： twitter-bootstrap

【解决方案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>

希望这会有所帮助！

【讨论】：

我在任何地方都没有看到记录，但我试过了，但弹出窗口仍然没有打开
我确实找到了这方面的文档，谢谢。我现在可以使用它，它应该是 tabindex，而不是 tab-index。编辑您的示例代码以显示这一点并将其标记为正确答案。跟进 - 我的编辑显示更正必须经过同行评审，因此最终可能会或可能不会出现。

【解决方案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>

【讨论】：