Search code examples
javascripttwitter-bootstrappopover

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:

<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

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