使用媒体查询在移动设备上隐藏引导工具提示

Question

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

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

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

Answer 1

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

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

现在，检查是否不是touch device 来触发工具提示：

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

Answer 2

只需使用 !important 标志，因为工具提示位置是内联样式。

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

Answer 3

要启用工具提示，您必须在代码中的某处添加类似 $('#example').tooltip(options) 的内容。

现在，要为移动设备禁用此功能，您可以使用 JavaScript 的 window.matchMedia 在 JavaScript 中指定媒体查询，因此不为较小的设备启用工具提示。

if (!window.matchMedia || (window.matchMedia("(max-width: 767px)").matches)) {

    // enable tooltips
    $('#example').tooltip();
}

移动版 Safari 5 及更高版本（以及其他浏览器）支持 MatchMedia。

Answer 4

我遇到了同样的问题，我在https://groups.google.com/forum/#!topic/twitter-bootstrap/Mc2C41QXdnI找到了解决方案

matchMedia 不支持 IE（在移动设备上不是问题），但也支持 Android 2.2/2.3； http://caniuse.com/matchmedia

也可以只使用 window.innerWidth;并根据相同的值进行检查，例如：

var isMobile;
var isTablet;
var isDesktop;

function detectScreen(){
    innerW = window.innerWidth;
        isDesktop = false;
        isTablet = false;
        isMobile = false;
        if(innerW >= 768 && innerW <= 979){
            isTablet = true;
        }else if(innerW > 979){
            isDesktop = true;
        }else{
            isMobile = true;
        }
        return innerW;
}

$(document).ready(function($) {
    detectScreen();

    $(window).resize(function() {
        detectScreen();
    });
}

]

然后你可以做同样的事情；

如果（！isMobile）{ 初始化工具提示（）； }

Answer 5

最简单的方法是添加原生 Bootstrap 类 hidden-xs 并且工具提示不会显示在移动屏幕上。

示例：

<span title="Your Tooltip Text" data-toggle="tooltip" data-placement="right" aria-hidden="true" class="glyphicon glyphicon-info-sign hidden-xs"></span>