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

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

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

我通过声明def:“touchstart”使初始触摸正常工作，而不是悬停，但是框不会关闭，并调用另一个触摸启动，如def:“touchstart，touchstart”不工作。def也不支持：“切换”，这在我看来是合乎逻辑的

---

有什么想法吗？

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

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

我做了同样的事情。以下是方法：

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

似乎有效

---

我尝试在工具提示功能中添加一个hide:选项，以便在10秒后自动隐藏，但在打开另一个工具提示之前，您无法再次打开该工具提示

我也做了同样的事。以下是方法：

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

似乎有效

---

我尝试在工具提示功能中添加一个hide:选项，以便在10秒后自动隐藏，但在打开另一个工具提示之前，您无法再次打开该工具提示

我无法复制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;
        } 
    });
});

---

用您选择的类替换

。工具提示触发器

。

我无法复制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;
        } 
    });
});

---

用您选择的类替换

。工具提示触发器

。

用户2956826答案遵循jqueryui建议-即：-

Safari Mobile 7.0+（可能还有更早的版本）存在一个bug，点击事件不会在通常不交互的元素上触发

…详细的

但是，包含的HTML特殊字符似乎在浏览器中按字面意思显示，我需要在双引号中用非HTML等效字符替换它们。在align=right周围的同一行中，也有一个（微不足道的）缺少的单引号，因此我对eg

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

s+=”；

user2956826答案遵循jqueryui建议，即：-

Safari Mobile 7.0+（可能还有更早的版本）存在一个bug，点击事件不会在通常不交互的元素上触发

…详细的

但是，包含的HTML特殊字符似乎在浏览器中按字面意思显示，我需要在双引号中用非HTML等效字符替换它们。在align=right周围的同一行中，也有一个（微不足道的）缺少的单引号，因此我对eg

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

s+=”；

对我来说，这很有效：

添加css:

.ui工具提示{光标：指针；}

添加jquery：

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

之后，当您单击工具提示时，工具提示将关闭，即使在iPad上也是如此。

对我来说，这是有效的：

添加css:

.ui工具提示{光标：指针；}

添加jquery：

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

---

之后，当你点击工具提示时，工具提示将关闭，即使在iPad上也是如此。

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

var $tooltipCaller = $('.tooltip');

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

---

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

var $tooltipCaller = $('.tooltip');

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