Javascript 用于桌面和移动平台的Twitter引导popover触发器

默认触发选项是单击。但我需要把它改成悬停。可以这样做：

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

但这对智能手机来说毫无意义。用户无法读取悬停触发的popover

对于我网站的“div”部分，我使用“”或“隐藏桌面”。你能提供一个很好的方法吗 使用鼠标悬停触发popover-适用于台式机 通过点击触发popover，适用于智能手机/平板电脑。 （我使用bootstrap 2.3.1）

相关的：

---

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

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

（触摸检测来自Modernizer库）

---

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

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

将鼠标悬停在桌面上，然后点击手机

请参阅：-“您可以传递多个触发器。”

---

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

还应该注意的是，twitter Bootstrap 3弹出窗口现在很乱。如果你一次只想打开一个，并且可以点击其他任何地方来关闭它，祝你好运——我发现这几乎是不可能的。他们的github页面上仍然有漏洞

我在我的生产应用程序中实现了它，效果非常好

---

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

请参阅下面我的答案，了解比使用Bootstrap 3更简单/更干净的解决方案。想想

触发器：是触摸设备吗？“单击焦点”：“悬停焦点”

将是一个很好的解决方案。需要触摸检测，这是一种非常干净的检测方法。实际上

触发器：是触摸设备吗？“焦点”：“悬停焦点”

heck也许焦点就是我想要的全部+1-我已经使用了您的方法来改变移动（窄）设备的位置：

placement:$（window.width（）<768？）顶部“：“right”

您的权利您可以，但不太好用的是

{trigger:“hover click focus”}

使用

{trigger:is_touch_device？“click focus”：“hover focus”}

中提到的答案，在我的案例中效果与预期一样，嗯，好的。为什么focus甚至需要参与？Hover/click似乎为我做了这项工作。例如->它使用了

{trigger:is_touch\u device？“focus”：“Hover focus”}

，因为

click

会将弹出框留在视频预告片上。虽然我想我可能只是使用了

{trigger:'hover focus'}

，但在触摸屏手机上hover似乎有点故障。嘿，如果你能做得更好，把回购要点交给我看，我会很乐意利用这个想法。您可能更喜欢类似于

{trigger:is\u touch\u device？“focus”：“hover click”}

是否愿意解释下一票？上一次我检查了Bootstrap github for Popover中存在的几个问题。我很乐意移除这个，因为他们已经把它清理干净了，但相信我，我花了好几个小时在解决这个问题上，这绝对是一团乱<代码>触发器：“焦点”可能会帮助您。