1

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

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

我通过声明 def:'touchstart' 使初始触摸工作而不是悬停，但是这些框不会关闭并调用另一个 touchstart，如 def:'touchstart，touchstart' 不起作用。def: 'toggle' 也没有，这对我来说似乎是合乎逻辑的。

有任何想法吗？

4

6 回答 6

3

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

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

似乎工作。

我尝试在工具提示功能中添加一个隐藏：选项以在 10 秒后自动隐藏，但随后您无法再次打开该工具提示，直到打开另一个工具提示。

于 2013-06-25T17:37:29.703 回答
1

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

于 2012-06-19T12:47:25.970 回答
1

我无法复制 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为您选择的类。

于 2013-11-05T15:45:41.403 回答
0

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>";
于 2015-04-09T21:22:46.290 回答
0

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

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

  $tooltipCaller.tooltip({
    open: function (e, ui) {
      $tooltipCaller.not(this).tooltip('close');
    }
  });
于 2017-12-14T00:56:13.133 回答
0

对我来说，这有效：

添加CSS：

.ui-tooltip{cursor:pointer;}

添加jquery： 

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

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

于 2017-11-18T09:07:15.207 回答