大佬教程收集整理的这篇文章主要介绍了Twitter Bootstrap Popover / Tooltip Bug with Mobile?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
防火码
$(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)">
提前致谢!
丹尼斯
说明
如07/08所示,您可以通过CSS指令元素来使其触摸设备可点击.我不能告诉你为什么这样工作或发生了什么,但似乎是这样.所以,我想使整个文件也可以在移动设备上单击,这将允许我触摸任何地方关闭popover.
Popover JS
$(function () { $('[data-toggle="popover"]').popover({ trigger: "hover"}}) });
路线
1.安装Modernizr
我使用的是轨道,所以我用了gem.
gem 'modernizr-rails'
.touch { cursor: pointer }
3.仅在触摸设备上,将触摸类添加到正文
如果你想要其他元素可点击,而不是整个身体,添加触摸类他们.
if (Modernizr.touch) { $( "body" ).addClass( "touch" ); }
而已!现在,您可以在桌面上正常使用您的弹出窗口(即使使用悬停触发),并且在移动设备上将触摸不起.
以上是大佬教程为你收集整理的Twitter Bootstrap Popover / Tooltip Bug with Mobile?全部内容,希望文章能够帮你解决Twitter Bootstrap Popover / Tooltip Bug with Mobile?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。