It may be worth noting as a warning that the hover option alone may not meet accessibility requirements since there is no way for a keyboard user to see the popover. Also, hover does not play well with mobile touch screen users since you can hover your finger over the screen as long as you want and that would never trigger. At least not till phones advance enough to watch our hands when not touching the screen, but that just gets creepy 😨.

Galaxy S5 actually had it (got taken out for S6). I think BlackBerry Storm might have had something analogous as well.

I think hover is of very limited use for Popovers, but thought it would be appropriate to demonstrate all the options for trigger.

BTW, this is really annoying:

The static modal isn't actually hideable, so you just get that alert every time you hit escape on the components page. IMO we should get rid of it entirely.

The root close logic should be merged across this, modals, and dropdowns as much as possible, but not until after your dropdown changes land, I think.

You last comment I assume is what triggered #701 😉

I agree about that close logic, though I don't know who well a wrapper component will work. With the DropdownButton we don't remove the DropdownMenu from the DOM when it's collapsed, it's hidden with CSS.

And the "background click" logic for modals isn't quite the same either. I'd just like to avoid duplicating the logic between this and dropdowns, as much as possible.

Understandable, I'm just thinking it could be more of a utility function to call as opposed to a component wrapper. The main issue is adding that event listener and removing it accordingly. The dropdown changes don't need the key event listener though since focus will be on the DropdownMenu. I'm wondering if it's even needed in the Modal once #690 is complete since the Modal will have focus as well.

iPad:

Click works as expected
Hover yeah 😄 it pops by clicking on it, but it can't be dismissed by any way.
(only by clicking on the Click button)
Focus - doesn't work at all.
Click+rootClose as I suspected it works only as Click.
because of the same as in #204 hack for iOS needed.

BTW: npm run docs with iPad doesn't work now. Only npm run docs-prod

Does the same problem apply to dropdowns as well on iOS?

I havn't checked.
Give me a sec.

The dropdowns don't have a hover or on focus trigger though so I wouldn't image this being a problem. Although there is a request to support it. I'm fine with having them, but we should at least warn people of the ramifications.

Dropdown buttons are OK.
Dropdowns in Navbar are Not dismiss by tapping outside of them.

Which fixes do we need before merging this?

I'd like some added documentation warning about the two usages described above for Mobile and Accessibility considerations.

Updating documentation:

I'd prefer to sort out issues with iOS click hack for rootClose and on dropdowns in nav per @AlexKVal's comments separately from this PR.

@mtscout6 - A minor suggestion: close the overlay on mousedown instead of (or in addition to) on click.

This doesn't match Bootstrap's built-in functionality, but it does match the browser's native context menu functionality and feels more responsive.

@aldendaniels I agree. I think the new dropdown menu code does what you say. Once we merge that, we can be consistent about closing the overlay on mousedown.

@taion Thanks for adding the functionality to address Popover dismissal. Do you have an example or demo we can look at to get this working? I'm not sure how to use the rootClose property.

@eventhough See the 3rd example here: http://react-bootstrap.github.io/components.html#popovers

I would like to be able to provide a callback to be executed on closing the popover. How can I achieve this?

@hugoduraes I don't believe we currently do not have a mechanism in place for invoking a callback on popover close. Feel free to submit a pull request if you'd like one in there, sounds reasonable enough to me to have.