Twitter Bootstrap Popover/Tooltip Bug with Mobile?

Question

I am working with Twitter Bootstrap and ran into something I could not fix when testing on iPad and iPhone. On mobile (at least those devices) you need to click to engage the t

Answer 1

I tried dozens of solutions posted to stackoverflow and other various corners of the web, and the following is the only one that worked for me!

Explanation

As noted here, you can a CSS-directive the element in order to make it touch-device-clickable. I can't tell you why that works or what's going on there, but that seems to be the case. So, I want to make the entire document aka body clickable on mobile devices, which will allow me to touch anywhere to dismiss the popover.

Popover JS

$(function () {
  $('[data-toggle="popover"]').popover({ trigger: "hover"}})
});

Directions

1. Install Modernizr

I'm using rails, so I used the gem.

gem 'modernizr-rails'

2. Create a touch class with a css-directive

Add the following to your CSS:

.touch {
  cursor: pointer
}

3. On touch devices only, add the touch class to the body

If you want other elements to be clickable, instead of the entire body, add the touch class to them.

if (Modernizr.touch) {
  $( "body" ).addClass( "touch" );
}

That's it! Now, you can use your popover normally on desktop (even with hover-trigger) and it will be touch-dismissible on mobile.