问题
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
回答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
回答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.
回答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.
来源：https://stackoverflow.com/questions/15690781/twitter-bootstrap-popover-trigger-for-desktop-and-mobile-platforms