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

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

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

]

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

{{1}}

Answer 5

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

实施例：

＆＃13;

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

＆＃13;

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

5 个答案: