Question

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

每个人都有同样的问题并为此找到解决方案吗？

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

Answer 1

将onclick="void(0)"行为添加到您的某些背景元素中，这些元素在点按时会删除弹出窗口。

信用：https://github.com/angular-ui/bootstrap/issues/2123

Answer 2

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

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

mouseenter show trigger具有mouseleave的dismiss触发器。您可以尝试创建自己的触发器并添加模糊消除触发器，如下所示：

'mouseenter': 'mouseleave blur'

Answer 3

我最成功地使用CSS来允许iOS将“ body”（以及会冒泡的任何嵌套元素）检测为可点击元素，并因此触发了“ click”事件，就像您期望的那样台式设备。

此媒体查询将以触摸设备为目标，并且不会导致台式设备上的光标样式更改。它同时解决了工具提示和弹出窗口，包括使用<ion-grid> <ion-row> <ion-col size-md="6" offset-md="3"> <ion-card> <ion-card-header> <ion-card-title> </ion-card-title> </ion-card-header> <ion-card-content> <ion-row class="background1 justify-content-center align-items-center" style="height: 100%" > <ion-col> <ion-text class="ion-float-left" style="font-size: 12px; font-weight: bold; ">Item Name</ion-text> </ion-col> <ion-col> <ion-button color="secondary" class="ion-float-right" size="small"> Back </ion-button> </ion-col> </ion-row> <ion-list > <ion-item> <ion-text>Hi</ion-text> </ion-item> <ion-item> <ion-text>Hello</ion-text> </ion-item> </ion-list> </ion-card-content> </ion-card> </ion-col> </ion-row> </ion-grid> </div>或mouseenter的工具提示。

outsideClick

我在Chrome上的Android上没有遇到任何问题，但是以上内容可以在Safari或Chrome上的Mobile iOS上解决。

UI-Bootstrap - 用于移动显示的Popover / Tooltip

3 个答案: