CODEWITHSUNDEEP
twitter-bootstrap
Pete
Pete

Reputation: 493

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

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?

Upvotes: 16

Views: 14015

Answers (2)

Chandima Samarakoon
Chandima Samarakoon

Reputation: 409

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

Upvotes: 8

neophyte
neophyte

Reputation: 6626

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!

Upvotes: 46

Related Questions