Twitter bootstrap popover trigger for desktop and mobile platforms

Question

Default popover trigger option is click. But I need to change it to hover. It can be done like this:

$("#popover").popover({ trigger: "hover" });

But this doesn't make sense for smartphones. User can't read hover-triggered popover.

For "div" parts of my site, I use "visible-desktop" or "hidden-desktop". Can you offer a good way to trigger popover with hover- for desktops trigger popover with click- for smartphones/tablets. (I use bootstrap 2.3.1)

Related: Make Bootstrap Popover Appear/Disappear on Hover instead of Click

Answer 1

My best suggestion is to detect whether there is a touch event. If so ("no" ability for hovering), use "click"...if not, use "hover". Try this:

var is_touch_device = ("ontouchstart" in window) || window.DocumentTouch && document instanceof DocumentTouch;
$("#popover").popover({
    trigger: is_touch_device ? "click" : "hover"
});

(the touch detection was taken from the Modernizr library)

What's the best way to detect a 'touch screen' device using JavaScript?

Detecting touch screen devices with Javascript