Bootstrap: Can dismissible popover work without href="#" ?

[bartvanderwal]

The dismissable popover is not working for me in Bootstrap 3.3.1. No popup window appears anymore when I add a data-trigger="focus" attribute.

See this fiddle:
http://jsfiddle.net/bartvanderwal/qjaL0tp4/

By comparing it in detail with the standard Bootstrap example on your website I found out that this can be fixed by adding a href="#'. See this Fiddle:
http://jsfiddle.net/bartvanderwal/29hbf4no/

But I'd prefer not to need a href :smile:, and that does works for the non-dismissable version, so it'd be more consistent.

[cvrebert]

So, do you have a specific working change that you're proposing, or are you just asking whether we know of some alternative that doesn't involve href="#" ?

[georgeoffley]

If you change the data-trigger="focus" to data-trigger="click" that eliminates the need for an href tag. Maybe something like that would help.

[cvrebert]

data-trigger="click" does not dismiss the popover when you click elsewhere on the page.
data-trigger="focus" does. That's the point of that example.

[georgeoffley]

I got it to work with the button attributes when I changed it to data-trigger="click focus".
See jsfiddle:
http://jsfiddle.net/goffley3/aj62yb7w/

[cvrebert]

data-trigger="click focus" causes the popover to open and then immediately close when initially clicked (at least on OS X Chrome).

[georgeoffley]

Oh so I just added the tabindex="0" to the link and was able to have it work with the data-trigger="focus" without the href=#

JSFiddle: http://jsfiddle.net/goffley3/kdh9xxp9/

[cvrebert]

Interestingly, removing href="#" makes the button focusable via keyboard tabbing in Safari.
Given that we're already using tabindex="0" and that .btn sets cursor: pointer, we might indeed not actually need the href attribute.
@mdo Anything I might be overlooking here?

[georgeoffley]

@cvrebert @mdo Looking through the documentation it explains it as well http://getbootstrap.com/javascript/#popovers

[cvrebert]

@georGEO1989 Huh?

[georgeoffley]

@cvrebert In that section under "Dismiss on next click" on the link http://getbootstrap.com/javascript/#popovers it says that to make the popover disappear you need to add the tabindex attribute for the data-trigger="focus" to work. AT least that's how I'm reading it I could be wrong but I tried that and it worked. :smile:

[cvrebert]

Right, I'm aware of that. I wrote that part of those docs. The question here is about href, not tabindex.

[georgeoffley]

Oh I'm sorry my bad. This is my first attempt to contribute to an open source project :flushed:

[bartvanderwal]

@cvrebert Thanks for the quick response. I was a bit busy with other stuff. As I mentioned I think it would be best if this worked without href. But I don't have a working change for that myself. I'm going with using tabindex="x" property suggested instead of a dummy `href="#' now, as that makes sense functionaly. Thanks @georGEO1989, for the suggestion (and your first open source contribution) :smile ; keep it up!

My best suggestion would be to add a remark in the Dismiss on next click section just below the 'dismissable popover' example that either the href of the tabindex attribute has to be present required for this too work. Or just keep it like it is, you guys must be busy as well.

[cvrebert]

I tested http://jsbin.com/zuzoce/5 (which removes the href="#") on all our supported platforms, and it seems to still work fine. And it's valid HTML5.
@patrickhlauke @mdo So, you guys okay with removing the href="#" from the dismissible popover example?

[mdo]

Removing the href is fine by me.

[Bounpakhong]

Why all you don't use href="#_" :)