Twitter Bootstrap Popover/工具提示错误是否与移动设备有关? [英] Twitter Bootstrap Popover/Tooltip Bug with Mobile?

问题描述

我正在使用Twitter Bootstrap，遇到了在iPad和iPhone上测试时无法修复的问题.在移动设备上(至少在那些设备上)，您需要单击以使笔尖或弹出窗口接合(如预期的那样).问题是您一旦完成就永远无法关闭它.如果您再次单击它，我添加了一个监听器以将其关闭，但是我很难相信默认行为不是单击将其删除.这是Bootstrap弹出窗口和工具提示中的错误吗?我的代码在下面-似乎可以正常工作，但是只有在您单击创建提示或弹出窗口的相同项目时-才能在页面上的任何地方(无法正常工作).

I am working with Twitter Bootstrap and ran into something I could not fix when testing on iPad and iPhone. On mobile (at least those devices) you need to click to engage the tip or popover (as expected). The issue is that you can never close it once you do. I added a listener to close it if you click it again, but I find it hard to believe that the default behavior would not be to click to remove it. Is this a bug in Bootstrap popover and tooltip?? My code is below - it seems to work, but ONLY if you click the same item that created the tip or popover - not anywhere on the page (could not get that to work).

要触发的代码:

$(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和网络其他各个角落的解决方案，以下是 only 为我工作的人！

I tried dozens of solutions posted to stackoverflow and other various corners of the web, and the following is the only one that worked for me!

如此处所述，您可以使用CSS指令将该元素设置为可触摸设备点击.我无法告诉您为什么这样做或那里正在发生什么，但事实确实如此.因此，我想使整个文档又称为body在移动设备上可单击，这将使我可以触摸任何地方以消除弹出窗口.

As noted here, you can a CSS-directive the element in order to make it touch-device-clickable. I can't tell you why that works or what's going on there, but that seems to be the case. So, I want to make the entire document aka body clickable on mobile devices, which will allow me to touch anywhere to dismiss the popover.

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

方向

1.安装Modernizr

我正在使用Rails，所以我使用了 gem .

gem 'modernizr-rails'

2.创建具有css指令的touch类

将以下内容添加到CSS:

2. Create a touch class with a css-directive

Add the following to your CSS:

.touch {
  cursor: pointer
}

3.仅在触摸设备上，将touch类添加到body

如果希望其他元素(而不是整个body)可单击，请向其中添加touch类.

3. On touch devices only, add the touch class to the body

If you want other elements to be clickable, instead of the entire body, add the touch class to them.

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

就是这样！现在，您可以在台式机上正常使用弹出式窗口(即使使用悬停触发)，并且在移动设备上也可以触摸关闭.

That's it! Now, you can use your popover normally on desktop (even with hover-trigger) and it will be touch-dismissible on mobile.

这篇关于Twitter Bootstrap Popover/工具提示错误是否与移动设备有关?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！