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

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

]

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

    if (!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>

Answer 6

在现代浏览器中，您可以使用css悬停媒体查询来定位不具备悬停功能的触摸设备。

@media (hover: none) {
  /* Hover is not supported */
 .tooltip
 {
  display: none;
 }
}