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

如果检测到iPhone/iPad/iPod，我将运行以下代码：

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

我已经通过声明 def：'touchstart' 来让初始触摸工作而不是悬停，但是这些框不会关闭并且调用另一个触摸启动，例如 def："触摸启动，触摸启动"不起作用。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;
              } 
          }     
       });
});

最后我添加了这个：

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

似乎有效。

我尝试在工具提示

功能中添加一个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 += "&lt;div align=right'>&lt;a href="javascript:$('.tooltip-trigger').tooltip('close');" class='touchTooltipHack'>close&lt;/a>&lt;/div>";
            return s;
        } 
    });
});

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

user2956826 答案遵循这里的 jqueryui 建议 - 即：-

Safari Mobile 7.0+（也可能是更早的版本）存在一个错误，即点击事件不会在通常不具有交互性的元素上触发。

。详见此处

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

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

对我来说，这有效：

添加 css：

.ui-tooltip{cursor:pointer;}

添加 jquery：

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

之后，当您单击它时，即使在 iPad 上，工具提示也会关闭。

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

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

相关内容

最新更新

热门标签：