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

我在我的网站上的按钮上使用Bootstrap的工具提示，但在移动设备上查看时，这些工具提示在第一次点击时触发，这意味着我必须双击该按钮。我想阻止这些在移动设备上显示，并尝试使用媒体查询来完成此操作。我的代码是：使用媒体查询在移动设备上隐藏Bootstrap工具提示

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

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

来源

2012-08-10 natlines

你不能碰JS呢？一种方法是使用2个按钮：一个隐藏在小分辨率上，另一个没有小屏幕的工具提示。这是可以想象的吗？ – Sherbrow 2012-08-10 16:10:42

我同意Sherbrow。 @natlines将可见桌面添加到您启用了工具提示的类中。但先修复你的按钮。检查工具提示的触发设置。 – 2012-08-12 17:48:38

谢谢，我会试一试。 – natlines 2012-08-21 11:07:30

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

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

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

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

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

来源

2013-01-08 08:41:16 spinningarrow

我有同样的问题，并修复它，谢谢。只是一个小的变化，是我启用非移动/非平板电脑，这意味着我用'if（window.matchMedia（“（min-width：991px）”））.matches）'而不是。 – umezo 2014-04-10 05:05:34

用'min-width：768px'替换'max-width'属性，以启用除智能手机之外的所有设备上的工具提示（遵循Bootstrap 3标准） – 2015-05-29 13:10:38

我遇到同样的问题，我发现在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) { 
     initTooltip(); 
    }

来源

2013-08-22 09:52:11 Agey

在页面上存在多个工具提示，则可能导致内存泄漏因为你正在重新初始化可能不需要的对象。小心一点。 – 2013-12-22 08:41:20

我已经实现了它的不同;手机和其他设备已启用touch，因此我检查了它是否是触摸设备。现在

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

，检查，如果它不是一个touch device触发提示：

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

来源

2014-07-09 07:29:01

这工作。如果该工具提示是针对某个用途的，则改为：函数isTouchDevice（）{}返回true ==（窗口中的“ontouchstart”|| window.DocumentTouch &&文档instanceof DocumentTouch）; （function）（e）{e（“a”）。tooltip（{html：true，container：“body”}）}）;}} if（isTouchDevice（）=== false）{if（ifTouchDevice（）=== false） } – user2513846 2015-01-28 15:50:02

只需使用的重要标志，因为该工具提示位置内嵌的风格！

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

来源

2014-11-01 13:36:22 TotPeRo

这是最简单的解决方案。为什么bootstrap在默认情况下没有内置？似乎这种类型的工具提示不会在移动设备上广泛使用。 – erier 2017-03-16 22:42:23

@erier这不是内置的，因为在移动设备上你没有鼠标悬停。 – TotPeRo 2017-03-17 14:35:59

最简单的方法是添加本机引导类隐藏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-30 10:00:27 pdolinaj

但是元素也没有出现，只是想关闭工具提示，而不是隐藏导致它们的元素。 – DiamondDrake 2016-03-10 19:19:32

@RickeyWard你可以使用反向逻辑来为这件事物添加另一个标记，比如'<！ - 任何在移动设备中都更好用 - >' 你也可以将@ hidden-sm添加到@ pdolinaj的答案中。 **编辑：**让我们忘记了关于媒体查询嘿嘿的问题 – aesede 2016-03-30 19:12:41

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

回答

相关问题