使用媒体查询在移动设备上隐藏 Bootstrap 工具提示 [英] Hiding Bootstrap Tooltips on Mobile using Media Queries

问题描述

我在我网站上的按钮上使用 Bootstrap 的工具提示，但在移动设备上查看时，这些工具提示在第一次点击时触发，这意味着我必须双击按钮.我想防止这些显示在移动设备上，并尝试使用媒体查询来做到这一点.我的代码是:

I am using Bootstrap's Tooltips over buttons on my site but when viewed on a mobile device, these tooltips are triggered on the first click, meaning I have to double click on the button. I want to prevent these being shown on mobile devices and have tried using media queries to do so. My code has been:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
{
 .tooltip
 {
  display: none;
 }
}

这会停止显示工具提示，但我仍然需要单击两次才能使按钮起作用.有什么办法可以防止使用媒体查询触发这些工具提示?

This stops the tooltip from displaying, but I still have to click twice to get the button to function. Is there any way I can prevent these tooltips from firing using media queries?

推荐答案

我以不同的方式实现了它；移动设备和其他设备都启用了touch，所以我检查了它是否是触摸设备.

I have achieved it differently; Mobile and other devices are touch enabled, so I checked if it's touch device or not.

function isTouchDevice(){
    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}

现在，检查是否不是触摸设备来触发工具提示:

Now, check if it's not a touch device to trigger the tool-tip:

if(isTouchDevice()===false) {
    $("[rel='tooltip']").tooltip();
}

这篇关于使用媒体查询在移动设备上隐藏 Bootstrap 工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！