Bootstrap's popover only working on buttons - not anchors or spans

Question

I am including tooltip.js and popover.js.

When my markup looks like so:

<button class="popover-dismiss" data-toggle="popover" title="sheen"  data-content="&lt;a href=&quot;sheen60&quot;&gt;60&lt;/a&gt;, &lt;a href=&quot;sheen80&quot;&gt;80&lt;/a&gt;"> PDS </button> 

with JS

$('.popover-dismiss').popover({   trigger: 'focus',   html: 'true' }) 

Then everything works fine. However, when I change my button to an a, it breaks. There are no errors in the console. It just simply does not give the popup.

<a href="javascript://" class="popover-dismiss" data-toggle="popover" title="sheen"  data-content="&lt;a href=&quot;sheen60&quot;&gt;60&lt;/a&gt;, &lt;a href=&quot;sheen80&quot;&gt;80&lt;/a&gt;"> PDS </a> 

The exact same attributes. Just an anchor instead of a button. I have also tried using a span and that does not appear to work either.

Answer 1

Ok so it turns out there is a bug in Twitter Bootstrap. It has been opened and closed a couple times.

There is currently a work around:

1) Do not use trigger: focus when initializing bootstrap popovers
2) Instead use data-trigger="focus" as an attribute to the items which will trigger the popover
3) Items which have a popover will need to have tabindex="-1" explicitly declared.

Cross-browser working example here: http://jsfiddle.net/v5L7m/3/

I have also confirmed this in a real-world use case scenario.

Edit: @xanderiel noted that tabindex=0 now appears to cause a browser native focus border which is what my original answer called for. They say a tabindex of -1 eliminates this border.