使用touchstart关闭iphone / ipad上的jQuery Tools工具提示

如果检测到iphone / ipad / ipod，我会运行以下代码：

$('.tooltip-trigger').tooltip({offset: [20, -110],relative:true, events: { def: 'touchstart,blur'} }); 

通过声明def：’touchstart’，我得到了最初的触摸工作，而不是hover，但是盒子没有关闭并调用另一个触摸器像def：’touchstart，touchstart’不起作用。 对我来说，def：’toggle’也不合乎逻辑。

有任何想法吗？

Answer 1

我做了同样的事情。 这是如何做：

 var isiPad = navigator.userAgent.match(/iPad/i) != null; 

我的工具提示function如下所示：

 $(function() { $(document).tooltip({ items: "[data-fn]", content: function() { var element = $( this ); if ( element.is( "[data-fn]" ) ) { var s = element.attr('data-fn'); var fn = /* some text content */ if (isiPad) fn += "
close
"; return fn; } } }); }); 

最后我添加了这个：

 $('.ipadTooltipHack').tooltip('close'); 

似乎工作。

我尝试在工具提示function中添加一个hide：选项，以便在10秒后自动隐藏，但是之后你无法再打开该工具提示，直到打开另一个工具提示。

Answer 2

我通过在智能手机和平板电脑的工具提示上放置一个关闭按钮来解决这个问题

Answer 3

我无法复制Bill Nobes和nlsbshtr的解决方案，按下“关闭”链接也导航到页面顶部。 我把它改成了一个稍微简单的解决方案。

这是基于jQuery和Modernizr.touch函数来检测我们是否在触摸设备上。 它使用标准的标题标签，并使用推荐的关闭方法关闭打开的工具提示。

 $(function() { $( '.tooltip-trigger' ).tooltip( { content: function() { var element = $( this ); var s = element.attr('title'); if ('' == s) return null; if (Modernizr.touch) // using Modernizr to detect touch devices. s += "<div align=right'><a href=\"javascript:$('.tooltip-trigger').tooltip('close');\" class='touchTooltipHack'>close</a></div>"; return s; } }); }); 

用您选择的类替换.tooltip-trigger 。

Answer 4

user2956826答案遵循jqueryui推荐 – 这是： –

Safari Mobile 7.0+（以及可能早期的版本）也存在一个错误，即不会对通常不是交互式的元素触发点击事件

……详细说明

但是，包含的HTML特殊字符似乎在浏览器中显示，我需要用双引号中的非html等效替换它们。 在align = right周围的同一行中也有（通常）缺少单引号，所以我有例如。

  s += "
close
"; 

Answer 5

对我来说，这有效：

添加CSS：

.ui-tooltip{cursor:pointer;}

添加jquery：

 $('body').on('click','.ui-tooltip', function(){ $(this).hide(); }); 

之后，工具提示将在您点击它时关闭，甚至在iPad上也会关闭。

Answer 6

好吧，只是在同一个问题上运行，但还有一个要求 – 因为我有多个工具提示，我至少需要关闭打开的工具提示，同时打开一个新工具提示。 有了这个简单的实现，也许会帮助别人

 var $tooltipCaller = $('.tooltip'); $tooltipCaller.tooltip({ open: function (e, ui) { $tooltipCaller.not(this).tooltip('close'); } });