Bootstrap’s popover only working on buttons – not anchors or spans

Bootstrap’s popover only working on buttons – not anchors or spans

I am including tooltip.js and popover.js.
When my markup looks like so:

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.

PDS

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.

Solutions/Answers:

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/

Solution 4:

Try setting container: 'body' option for popover() call.

References