qtip2 在移动设备上禁用答案

【问题标题】：qtip2 disable on mobile deviceqtip2 在移动设备上禁用
【发布时间】：2013-12-01 17:35:56
【问题描述】：

我正在寻找一种在移动设备上查看我的网站时禁用 qtip2 工具提示的方法。在桌面浏览器中，工具提示出现在悬停时，在移动设备上，当文本输入被触摸时它们会弹出（这是大多数工具提示，通过 title=""）。我只能通过触摸其他地方让它消失，我怀疑最终用户会在被它惹恼之前弄清楚这一点。

查看 API 并在此处搜索 SO，我遇到的少数解决方案对我不起作用。这是我尝试过的：

$('[title!=""]').qtip({// Grab elements with a title attribute that isn't blank.
        style: 'qtip-tipsy',
        position: {
             target: 'mouse', // Track the mouse as the positioning target
             adjust: { x: 5, y: 15 } // Offset it slightly from under the mouse
        }
    }); 

//check window size on page load. 
    if ($(window).width() < 960) {
    alert('Less than 960');
    //$('[title!=""]').qtip('hide').qtip('disable');
    $('[title!=""]').qtip('destroy', true); // Immediately destroy all tooltips belonging to the selected elements
}
else {
   //alert('More than 960');
}
});

在测试时，当我将浏览器设置为小于 960 并刷新时会触发警报，因此它似乎可以正确读取该代码。我尝试了我在 craigsworks.com 论坛上阅读过的两种方法，第一种是使用隐藏和禁用（当前在上面的示例中注释掉，而我尝试下一个），第二种是使用“销毁” 我还尝试在“位置”的最后一个大括号之后和结尾 }) 之前直接添加窗口大小代码；

然后我尝试直接访问 api，但我真的不知道我是否正确执行它，我找不到任何包含所有需要代码的示例。这是我尝试过的：

   var tooltips = $('[title!=""]').qtip({// Grab elements with a title attribute that isn't blank.
    style: 'qtip-tipsy',
    position: {
               target: 'mouse', // Track the mouse as the positioning target
               adjust: { x: -5, y: -15 } // Offset it slightly from under the mouse
          }
   }); 
    // Grab the first element in the tooltips array and access it's qTip API
    var api = tooltips.qtip('api'); 
    //check window size on page load. 
        if ($(window).width() < 960) {
        alert('Less than 960');

    $tooltips.qtip('destroy', true); // Immediately destroy all tooltips belonging to the selected elements
}
else {
   //alert('More than 960');
}
});

过去几天我一直在处理这个问题（还有其他一些我无法开始工作的领域，比如使用按钮打开/关闭工具提示，但我专注于一件事一次）。我希望你们中的一些更擅长编码的人能看到我哪里出错了。

【问题讨论】：

你在用jqm吗？试试这个if ($(window).width() < 960) { $('[title!=""]').on("click', function () { return false; }); }
我正在使用 jqm。如果窗口宽度是移动大小，我更希望 qtips 根本不加载。除此之外，有关其格式的某些内容会导致语法错误。就像我说的，我不是这方面的专家，所以也许我只是遗漏了一些明显的东西。我尝试了多种方法（有和没有结束大括号，用这个替换 $tooltips 行），它报告了一个语法错误。
会刚刚编辑最后一条评论，但显然它们只能编辑 5 分钟，而我正在试验……等等！您在点击开始时有一个双引号，在......现在尝试之后有一个单引号。没有。当我点击应该在桌面浏览器中显示提示的任何内容时，仍然会在移动设备上显示提示。
你找到答案了吗？我也在为同样的问题苦苦挣扎……

标签： jquery jquery-mobile qtip2

【解决方案1】：

当移动设备似乎无法正常工作时，我最终使用此代码仅加载部分 qtip 代码。借自If mobile disable certain scripts

<script type="text/javascript">
$(document).ready(function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
}else
{
$('[title!=""]').qtip({
     position: {
         target: 'mouse', // Track the mouse as the positioning target
         adjust: { x: 5, y: 5 } // Offset it slightly from under the mouse
     }
 })
}
});
</script>

显然，您可以在其中设置任何 qtip 设置，但通过将它们从页面中删除，它只会将我的 qtip 区域变为链接而不是工具提示。这就是我想要的。您可以将此代码用于任何 javascript 禁用/启用移动到桌面..

【讨论】：

【解决方案2】：

不要依赖 init 或 doc 就绪，因为它们无法处理响应式/调整大小或类似的 DOM 更改。相反，我建议使用“侦听器”，它可以即时检查您需要的内容并让其他脚本可以使用这些内容。首先使用content 附加CSS 媒体查询:after 正文，然后使用调整大小（或其他）事件来监视它，然后根据当前content 中的内容减轻需要更改的内容。

要点：https://gist.github.com/dhaupin/f01cd87873092f4fe2fb8d802f9514b1

小提琴：https://jsfiddle.net/Dhaupin/nw7qbdzx/.

所以基本上，在正常的 qtip2 初始化之后，您可以使用该侦听器禁用它的状态而不破坏（同时允许重新启用，如果说，您插入监视器和鼠标）。

您可以在这些示例链接中找到以下 qtip 状态。它们包含在功能检查中，以防发生灾难；）

禁用qtip：$('[data-hasqtip]').qtip('hide').qtip('disable');
重新启用qtip：$('[data-hasqtip]').qtip('enable');

由于监听器在<html>标签上放置了标志，你也有机会观察来自/for/因为其他事件、函数等的ui_风格属性。

【讨论】：

【解决方案3】：

这应该可行：

.qtip {
    display: none !important;
}

【讨论】：