UI-Bootstrap - 用于移动显示的弹出框/工具提示答案

【问题标题】：UI-Bootstrap - Popover/Tooltip for mobile displayUI-Bootstrap - 用于移动显示的弹出框/工具提示
【发布时间】：2015-03-30 06:30:57
【问题描述】：

我在移动显示中遇到了 Bootstrap-UI Tooltip/Popover-directive 的问题。如果用户单击带有工具提示的按钮，则此弹出框将正确显示。但不幸的是，如果用户单击其他地方，此弹出窗口将不会关闭。

是否每个人都遇到过同样的问题并找到了解决方案？

我使用的是最新版本（0.12.1）。

【问题讨论】：

【解决方案1】：

将onclick="void(0)" 行为添加到您的一些背景元素中，点击这些元素会消除弹出框。

【讨论】：

【解决方案2】：

工具提示的默认 triggerMap 如下所示：

  var triggerMap = {
    'mouseenter': 'mouseleave',
    'click': 'click',
    'focus': 'blur'
  };

mouseenter 显示触发器有一个 mouseleave 关闭触发器。您可以尝试创建自己的触发器并添加一个模糊关闭触发器，如下所示：

'mouseenter': 'mouseleave blur'

【讨论】：

【解决方案3】：

我在使用 CSS 让 iOS 将“body”（以及任何会冒泡的嵌套元素）检测为可点击元素并因此触发“点击”事件方面取得了最大的成功，就像你所期望的那样桌面设备。

此媒体查询将针对触控设备，不会导致桌面设备上的光标样式发生变化。它解决了工具提示和弹出框，包括使用mouseenter 或outsideClick 的工具提示。

@media (hover: none), (pointer: coarse) {
    body {
        cursor: pointer;
    }
}

我在 Chrome 上的 Android 上没有问题，但以上将在 Safari 或 Chrome 上的移动 iOS 上解决它。

【讨论】：