javascript - 用于桌面和移动平台的 Twitter 引导弹出框触发器

Question

默认弹出框触发选项是单击。但我需要将其更改为悬停。可以这样做：

$("#popover").popover({ trigger: "hover" });

但这对智能手机来说没有意义。用户无法读取悬停触发的弹出框。

对于我网站的“ div ”部分，我使用“ visible-desktop ”或“hidden-desktop”。您能否提供一种通过悬停触发弹出窗口的好方法 - 用于桌面触发弹出窗口 - 用于智能手机/平板电脑。（我使用引导程序 2.3.1）

相关： 使引导弹出窗口出现/消失在悬停而不是单击时

Answer 1

我最好的建议是检测是否有触摸事件。如果是这样（“没有”悬停能力），请使用“单击”...如果不是，请使用“悬停”。尝试这个：

var is_touch_device = ("ontouchstart" in window) || window.DocumentTouch && document instanceof DocumentTouch;
$("#popover").popover({
    trigger: is_touch_device ? "click" : "hover"
});

（触摸检测取自 Modernizr 库）

使用 JavaScript 检测“触摸屏”设备的最佳方法是什么？

使用 Javascript 检测触摸屏设备

Answer 2

如果你可以升级到 Bootstrap 3+，你可以使用这个更干净的解决方案：

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

这将适用于悬停在桌面上并单击移动设备。

请参阅： http: //getbootstrap.com/javascript/#popovers -“您可以传递多个触发器。”

我不确定在使用 Bootstrap 2 之前这是否可行，因为接受的答案是从 2013 年开始的。因此，如果您可以将 Bootstrap 升级到版本 3+，我会以这种方式重构它。

Answer 3

还应该注意的是，twitter bootstrap 3 popovers 现在一团糟。如果您一次只希望打开一个并且能够单击其他任何位置来关闭它，那么祝您好运 - 我发现这几乎是不可能的。他们的 github 页面上仍然存在错误。

我在我的生产应用程序中实现了https://github.com/sandywalker/webui-popover并且效果很好。

编辑（2020 年 4 月）：工具提示/弹出框空间中出现了一个冠军：Tippy.js（https://atomiks.github.io/tippyjs/）。没有理由使用其他任何东西。为负责这个精彩库的开发人员干杯！