Bootstrap Popover bug with focus trigger undismissible on iOS/Safari

Question

I've implemented a dismissible popover on a <button> element with type="submit" for use with a form.

As the Bootstrap docs clearly state:

Use the focus trigger to dismiss popovers on the next click that the user makes.

For proper cross-browser and cross-platform behavior, you must use the <a> tag, not the <button> tag, and you also must include the role="button" and tabindex attributes.

http://getbootstrap.com/javascript/#popovers-examples

However popovers can be dimissed by the next click of a user using the hover trigger. I don't have the option of using an <a> element as the <button> corresponds to a form submission (apologies for long code block):

<button data-placement="top" data-toggle="popover" data-trigger="hover" title="placeholder text" data-content="placholder text" type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-block btn-success marg-bot-20">Subscribe to Best Hot Tub Updates <i class="fa fa-envelope"></i></button>

The issue is here that the popover is dismissible expect on iOS mobile devices using the Safari web browser. Once the <button> is used the popover is not dismissable if the user taps elsewhere on the page or on the popover itself. This obscures the form element (preventing it from being viewed) and therefore needs fixing:

Is there some form of workaround or fix I can apply here to make the popover dismissible when tapping on it or elsewhere on the web page (default behaviour on Chrome android browser) for iOS/Safari while retaining the use of a <button> element for form functionality?

The issue can be viewed on a development site here:

http://www.the-session.co.uk/dev_standalone/

Answer 1

You could use a <a> element and make it submit your form. Thus, you will follow the recommendation of bootstrap.

<a href="javascript:void(0)" onclick="document.getElementById('mc-embedded-subscribe-form').submit(); return false;" role="button" tabindex="0" data-placement="top" data-toggle="popover" data-trigger="hover" title="placeholder text" data-content="placholder text" type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-block btn-success marg-bot-20">Subscribe to Best Hot Tub Updates <i class="fa fa-envelope"></i></a>

Nevertheless, the real issue is probably about iOS and the bootstrap's popover with data-trigger="focus", because if you take a look at the bootstrap sample ( http://getbootstrap.com/javascript/#dismiss-on-next-click ), it doesn't work for iOS even on their page