jquery – 在移动设备上禁用qtip2

2023年5月11日 107次阅读

我正在寻找一种在移动设备上查看我的网站时禁用qtip2工具提示的方法.

在桌面浏览器中,工具提示出现在悬停状态,在移动设备上,当触摸文本输入时,这些工具提示会弹出(这是大多数情况下,通过title =“”).我只能通过触摸其他地方让它消失,我怀疑最终用户会在被它烦恼之前想出来.

查看API,并在此处搜索,我遇到的几个解决方案对我不起作用.
这是我尝试过的：

$('[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');
}
});

在过去的几天里我一直在研究这个问题(还有其他方面我无法开始工作,比如用按钮切换工具提示开/关,但我一次只关注一件事) .我希望你们中有些能够更好地编码的人能够看到我出错的地方.

最佳答案 我最终使用此代码只加载部分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禁用/启用移动设备到桌面..

点赞