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.

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

Solution 2

Well, I guess that if you want to use "focus" as a trigger your element must be focusable. Setting tabindex forces the element to be focusable, that's why trigger "focus" starts working when tabindex is set.

Consider using a tabindex of -1 if you do not expect users to actually stop on the element hitting the tab key.

That's all there is to it. Trigger: focus can be used in JS initialization.

Solution 3

There's no need for a workaround or anything. It works just fine if you set the info via JS, here's an example:

HTML:

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

JS:

$(function() {
    $(document).popover({
        selector: '[data-toggle=popover]',
        trigger: 'focus'
    });
});

JSFiddle: https://jsfiddle.net/s02ykLo2/