桌面和移动平台的Twitter引导弹出触发器

Question

单击默认弹出窗口触发器选项.但是我需要改变它来悬停.它可以这样做:

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

但这对智能手机没有意义.用户无法读取悬停触发的弹出窗口.

对于我网站的" div "部分,我使用" visible-desktop "或"hidden-desktop".你可以提供一个很好的方法来触发popover与悬停 - 桌面触发弹出与点击智能手机/平板电脑.(我使用bootstrap 2.3.1)

相关: 在悬停时出现Bootstrap Popover/Disappear而不是Click

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 popover 现在一团糟。如果您一次只希望打开一个并且能够单击其他任何地方将其关闭，祝您好运 - 我发现这几乎是不可能的。他们的 github 页面上仍然存在错误。

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

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