31

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

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

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

4

5 回答 5

30

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

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

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

if(isTouchDevice()===false) {
    $("[rel='tooltip']").tooltip();
}
于 2014-07-09T07:29:01.437 回答
16

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

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    .tooltip {
        display: none !important;
    }
 }
于 2014-11-01T13:36:22.860 回答
12

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

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

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

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

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

于 2013-01-08T08:41:16.770 回答
1

我遇到了同样的问题，我在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）{
      初始化工具提示（）；
    }
于 2013-08-22T09:52:11.537 回答
0

最简单的方法是添加原生 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>

于 2015-10-30T10:00:27.940 回答