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

Posted 2023-02-22

【中文标题】用于桌面和移动平台的 Twitter 引导弹出框触发器

【英文标题】：Twitter bootstrap popover trigger for desktop and mobile platforms

【发布时间】：2013-03-19 10:03:11

【问题描述】：

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

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

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

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

相关： Make Bootstrap Popover Appear/Disappear on Hover instead of Click

【参考方案1】：

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

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

（触摸检测取自 Modernizr 库）

What's the best way to detect a 'touch screen' device using javascript?

Detecting touch screen devices with Javascript

【讨论】：

使用 Bootstrap 3 获得比这更简单/更清洁的解决方案，请参阅下面的答案。

认为trigger: is_touch_device ? "click focus" : "hover focus" 会是一个很好的解决方案。需要触摸检测，这是一种非常干净的检测方法。

其实trigger: is_touch_device ? "focus" : "hover focus" 哎呀，也许我想要的只是专注

+1 - 我已经使用你的方法来改变移动（窄）设备的位置：placement: $(window).width() < 768 ? 'top' : 'right'

【参考方案2】：

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

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

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

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

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

【讨论】：

你的权利你可以，但效果不佳的是trigger: 'hover click focus' 使用***.com/a/15691248/1815624 和trigger: is_touch_device ? "click focus" : "hover focus" 中提到的答案在我的情况下按预期工作

嗯，好的。为什么焦点甚至需要参与？悬停/点击似乎对我有用。

示例 -> bl.ocks.org/CrandellWS/2e7d918cbae163ca9c1b 使用 trigger: is_touch_device ? "focus" : "hover focus" 因为click 将弹出窗口留在视频预告片上。虽然我想我可能只是使用了trigger: 'hover focus'，但悬停在触摸屏手机上似乎有问题。嘿，如果你能更好地分叉 Gist 回购并向我展示，我会很乐意利用这个想法。你可能更喜欢trigger: is_touch_device ? "focus" : "hover click"

【参考方案3】：

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

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

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

【讨论】：

想解释一下否决票？最后，我检查了 Bootstrap github 中有几个针对弹出框的可靠未解决问题。我很乐意删除它，因为他们已经清理了它，但相信我，我花了好几个小时来解决这个问题，这绝对是一团糟！

trigger: 'focus' 可能会对您有所帮助。