20

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

Community
  • 1
  • 1
trante
  • 33,518
  • 47
  • 192
  • 272

3 Answers3

26

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

Community
  • 1
  • 1
Ian
  • 50,146
  • 13
  • 101
  • 111
  • See my answer below for a simpler/cleaner solution than this using Bootstrap 3. – Greg Blass Oct 16 '15 at 16:55
  • 2
    Think that `trigger: is_touch_device ? "click focus" : "hover focus"` would be good solution. Touch detection is desired and that is a pretty clean way to detect it. – CrandellWS Oct 18 '15 at 07:13
  • 1
    actually `trigger: is_touch_device ? "focus" : "hover focus"` heck maybe just focus is all i want – CrandellWS Oct 18 '15 at 09:48
  • 1
    +1 - I've used your approach to alter placement for mobile (narrow) devices: `placement: $(window).width() < 768 ? 'top' : 'right' ` – Tobias Aug 10 '16 at 17:03
14

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.

Greg Blass
  • 3,523
  • 29
  • 42
  • 2
    Your right you can but what doesn't work so well is `{trigger: 'hover click focus'}` using the answer mentioned at http://stackoverflow.com/a/15691248/1815624 with `{trigger: is_touch_device ? "click focus" : "hover focus"}` works as expected in my case – CrandellWS Oct 18 '15 at 07:15
  • Hmm, OK. Why does focus even need to be involved? Hover/click seems to do the job for me. – Greg Blass Oct 18 '15 at 10:55
  • 2
    Example -> http://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"}` – CrandellWS Oct 18 '15 at 15:10
5

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!

Greg Blass
  • 3,523
  • 29
  • 42
  • Care to explain the downvote? Last I checked there are a couple solid open issues in Bootstrap github for popovers. I'd be happy to remove this is they've cleaned it up, but trust me I spent hours and hours on workarounds for this and it is definitely a mess! – Greg Blass Aug 30 '16 at 21:01
  • `trigger: 'focus'` might help you. – Remi Sture Oct 24 '16 at 08:41