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

Solution 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

Solution 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.

Solution 3

It should also be noted that twitter bootstrap 3 popovers are a mess right now. If you want only one open at a time and to be able to click anywhere else to close it, good luck - I found it pretty much impossible. There are still bugs open on their github page.

I implemented https://github.com/sandywalker/webui-popover in my production app and it works great.

EDIT (April 2020): A champion has emerged in the tooltip/popover space: Tippy.js (https://atomiks.github.io/tippyjs/). There is no reason to use anything else. Cheers to the developers responsible for this wonderful library!

Comments

[CrandellWS]

Your right you can but what doesn't work so well is {trigger: 'hover click focus'} using the answer mentioned at stackoverflow.com/a/15691248/1815624 with {trigger: is_touch_device ? "click focus" : "hover focus"} works as expected in my case

[Greg Blass]

Hmm, OK. Why does focus even need to be involved? Hover/click seems to do the job for me.

[CrandellWS]

Example -> bl.ocks.org/CrandellWS/2e7d918cbae163ca9c1b which uses {trigger: is_touch_device ? "focus" : "hover focus"} because click leaves the popover on the video trailers. Though I guess I could have perhaps just used {trigger: 'hover focus'} but hover seems glitchy on touch screen phone. Hey if you can do better fork the Gist repo and show me and I will gladly utilize the idea. You may prefer something like {trigger: is_touch_device ? "focus" : "hover click"}