关闭jQuery的工具提示与touchstart iPhone / iPad版(Closing jQ

如果检测到iPhone / iPad的/ iPod的我已经被运行下面的代码：

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

我有初步接触的工作，而不是在悬停的DEF声明：“touchstart”，然而盒不要靠近，并呼吁像高清另一touchstart：“touchstart，touchstart”不起作用。 同样没有高清：“切换”，这似乎是合乎逻辑我。

有任何想法吗？

Answer 1:

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

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

我的提示功能如下：

$(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 += "<div align=right'><a href='#' class='ipadTooltipHack'>close</a></div>";
              return fn;
              } 
          }     
       });
});

最后，我添加了这个：

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

似乎工作。

我尝试添加一躲：选项的提示功能，工作10S后自动隐藏，但是，你不能再次打开该工具提示，直到一个不同是开着的。

Answer 2:

我通过放置工具提示的智能手机和平板电脑关闭按钮解决了这个只

Answer 3:

我无法复制由比尔·诺布斯和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浏览器的移动7.0+（可能更早版本太）从一个错误遭受那里单击事件不会对不属于典型的互动元素解雇

...详细点击这里

然而，HTML包含特殊字符，似乎是在浏览器中显示的字面上，我需要用双引号内的非HTML等价物来替换它们。 还有一个（平凡）缺少的单引号围绕对齐同一行=右，所以我有例如。

 s += "<div align='right'><a href=\"javascript:$('.tooltip-trigger').tooltip('close');\" class='touchTooltipHack'>close</a></div>";

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');
    }
  });

文章来源: Closing jQuery Tools tooltip on iphone/ipad with touchstart