Question

我正在寻找一种在移动设备上查看我的网站时禁用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论坛上阅读过的方法，首先是使用hide和disable（当前我在下一个例子中注释掉了），第二个是使用'destroy' 我也尝试在'position'的最后一个大括号之后和结尾之前直接添加window-size代码;）

然后我尝试直接访问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');
}
});

过去几天我一直在研究这个问题（还有其他一些我无法开始工作的领域，比如用按钮切换工具提示，但是我专注于一件事情一段时间）。我希望你们中的一些能够更好地编写代码的人能够看到我出错的地方。

Answer 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禁用/启用移动设备到桌面..

Answer 2

不要依赖init或doc，因为它不会处理响应/调整大小或类似的DOM更改。相反，我推荐一个＆＃34;听众＆＃34;可以动态检查您需要什么，并使其他脚本可供使用。首先使用:after附加CSS媒体查询content正文，然后使用调整大小（或其他）事件来监视它，然后根据当前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_样式属性，因为其他事件，函数等。

Answer 3

这应该有效：

.qtip {
    display: none !important;
}

qtip2在移动设备上禁用

3 个答案: