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

To use data-trigger="focus" attribute on bootstrap popover you need to use tabindex="0". like this -- (edited to change tab-index to 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>

Hope this helps!


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