twitter-bootstrap 用于桌面和移动平台的 Twitter 引导弹出窗口触发器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15690781/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap popover trigger for desktop and mobile platforms
提问by trante
Default popovertrigger 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)
对于我网站的“ div”部分，我使用“ visible-desktop”或“hidden-desktop”。您能否提供一种通过悬停触发弹出窗口的好方法 - 对于桌面，通过单击触发弹出窗口 - 对于智能手机/平板电脑。（我使用引导程序 2.3.1）
Related: Make Bootstrap Popover Appear/Disappear on Hover instead of Click
回答by Ian
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)
（触摸检测取自 Modernizr 库）
What's the best way to detect a 'touch screen' device using JavaScript?
使用 JavaScript 检测“触摸屏”设备的最佳方法是什么？
回答by Greg Blass
If you can upgrade to Bootstrap 3+, you can use this cleaner solution:
如果你可以升级到 Bootstrap 3+，你可以使用这个更干净的解决方案：
$('[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."
请参阅：http: //getbootstrap.com/javascript/#popovers-“您可以传递多个触发器。”
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.
我不确定在使用 Bootstrap 2 之前这是否可行，因为接受的答案是从 2013 年开始的。因此，如果您可以将 Bootstrap 升级到版本 3+，我会以这种方式对其进行重构。
回答by Greg Blass
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.
还应该注意的是，twitter bootstrap 3 popover 现在一团糟。如果您一次只希望打开一个并且能够单击其他任何地方将其关闭，祝您好运 - 我发现这几乎是不可能的。他们的 github 页面上仍然存在漏洞。
I implemented https://github.com/sandywalker/webui-popoverin my production app and it works great.
我在我的生产应用程序中实现了https://github.com/sandywalker/webui-popover并且效果很好。
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!
编辑（2020 年 4 月）：工具提示/弹出窗口中出现了一个冠军：Tippy.js ( https://atomiks.github.io/tippyjs/)。没有理由使用其他任何东西。为这个美妙的图书馆负责的开发人员干杯！
