Bootstrap data-trigger="focus" doesn't work

user_2882817 0
Viewed 10195

I have a Bootstrap popover defined on an icon which works fine if I do not have data-trigger="focus" as part of its definition. When I include that, the popover does not display when I click the icon. Here's the code without the data-trigger.

<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>

And the code including the data-trigger:

<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>

I should also mention that the icon is within a table cell.

Any ideas?

twitter-bootstrap
2 Answers

"data-trigger=“focus” doesn't work, was happened when you are using popover in anchors or spans. (data-trigger=“focus” properly works when you use the popover for button).

So in this case you have to add tabindex="-1" or tabindex="0" for anchor tag or spans tags.

  • tabindex="0" appears with a boarder
  • tabindex="-1" appears without a boarder

Eg. <a data-toggle="popover" tabindex="-1" data-trigger="focus"> Click here</a>

user_99725250
Related