加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Twitter Bootstrap Popover / Tooltip Bug with Mobile?

发布时间:2020-12-18 00:18:54 所属栏目:安全 来源:网络整理
导读:我正在使用Twitter Bootstrap,并在iPad和iPhone上进行测试时遇到了一些我无法解决的问题.在移动设备(至少是那些设备)上,您需要点击以接触提示或弹出窗口(如预期).问题是,一旦你做,永远不会关闭它.我添加了一个监听器关闭它,如果你再次点击它,但我发现很难相
我正在使用Twitter Bootstrap,并在iPad和iPhone上进行测试时遇到了一些我无法解决的问题.在移动设备(至少是那些设备)上,您需要点击以接触提示或弹出窗口(如预期).问题是,一旦你做,永远不会关闭它.我添加了一个监听器关闭它,如果你再次点击它,但我发现很难相信默认的行为不会是单击去除它.这是Bootstrap popover和工具提示中的错误?我的代码在下面 – 它似乎工作,但只有当您点击创建提示或popover相同的项目 – 不在页面上的任何地方(无法使它工作).

防火码

$(function () {
    //Remove the title bar (adjust the template)
    $(".Example").popover({ 
        offset: 10,animate: false,html: true,placement: 'top',template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
        //<h3 class="popover-title"></h3>
        //Need to have this click check since the tooltip will not close on mobile
        }).click(function(e) {
            jQuery(document).one("click",function() {
                $('.Example').popover('hide')
        });   
    });
});

HTML:

<a href="javascript:void(0);" class="Example" rel="popover" data-content="This is the Data Content" data-original-title="This is the title (hidden in this example)">

提前致谢!

丹尼斯

解决方法

我尝试了几十个解决方案发布到stackoverflow和网络的其他各个角落,以下是唯一一个为我工作的!

说明

如07/08所示,您可以通过CSS指令元素来使其触摸设备可点击.我不能告诉你为什么这样工作或发生了什么,但似乎是这样.所以,我想使整个文件也可以在移动设备上单击,这将允许我触摸任何地方关闭popover.

Popover JS

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

路线

1.安装Modernizr

我使用的是轨道,所以我用了gem.

gem 'modernizr-rails'

2.使用css-directive创建一个触摸类

将以下内容添加到您的CSS中:

.touch {
  cursor: pointer
}

3.仅在触摸设备上,将触摸类添加到正文

如果你想要其他元素可点击,而不是整个身体,添加触摸类他们.

if (Modernizr.touch) {
  $( "body" ).addClass( "touch" );
}

而已!现在,您可以在桌面上正常使用您的弹出窗口(即使使用悬停触发),并且在移动设备上将触摸不起.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读