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

Answer 2

If you can upgrade to Bootstrap 3+, you can use this cleaner solution:

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

Which will work with hover on desktop and click on mobile.

See: http://getbootstrap.com/javascript/#popovers - "You may pass multiple triggers."

I'm not sure if this was possible before using Bootstrap 2, as the accepted answer was from 2013. So if and when you can upgrade Bootstrap to version 3+, I would refactor it this way.