Menu
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?
886
" 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. Eg. <a data-toggle="popover" tabindex="-1" data-trigger="focus"> Click here</a>
To use data-trigger="focus" attribute on bootstrap popover you need to use tabindex="0" . like this -- (edited to change tab-index to tabindex) Hope this helps! I did find the docs on this, thanks. I have it working now, it should be tabindex, not tab-index. Edited your example code to show that and marked it as the correct answer.
When I use the native Bootstrap PopOver with HTML in it's content, the frontend is not displaying that PopOver and the HTML Source is malformatted. Make sure to add the JS to the Toolset > Layouts JS/CSS section and to use jQuery instead of $. This support ticket is created 5 years, 3 months ago.
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!
130
"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.
Eg. <a data-toggle="popover" tabindex="-1" data-trigger="focus"> Click here</a>
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
