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 tip or popover (as expected). The issue is that you can never close it once you do. I added a listener to close it if you click it again, but I find it hard to believe that the default behavior would not be to click to remove it. Is this a bug in Bootstrap popover and tooltip?? My code is below - it seems to work, but ONLY if you click the same item that created the tip or popover - not anywhere on the page (could not get that to work). Code to fire: ``` $(function () { //Remove the title bar (adjust the template) $(".Example").popover({ offset: 10, animate: false, html: true, placement: 'top', template: '' // //Need to have this click check since the toolti…

Accepted Answer

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.

Twitter Bootstrap Popover/Tooltip Bug with Mobile?

Solution

Problem