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

Posted 2023-03-07

【中文标题】使用媒体查询在移动设备上隐藏引导工具提示

【英文标题】：Hiding Bootstrap Tooltips on Mobile using Media Queries

【发布时间】：2012-08-07 20:01:53

【问题描述】：

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

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 

 .tooltip
 
  display: none;
 

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

【问题讨论】：

你根本不能碰JS吗？一种方法是使用 2 个按钮：一个隐藏在小分辨率上，另一个没有工具提示用于小屏幕。这可以想象吗？

我同意舍布罗。 @natlines 将可见桌面添加到您启用了工具提示的 类中。但是先修复你的按钮点击。检查工具提示的触发器设置。

谢谢，我试试看。

***.com/questions/10483474/… 似乎几乎是同一个问题。

【参考方案1】：

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

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

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

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

【讨论】：

这行得通。如果工具提示针对 a 使用 this 代替： function isTouchDevice() return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch); if(isTouchDevice()===false) jQuery(function(e)e("a").tooltip(html:true,container:"body"));

【参考方案2】：

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

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

【讨论】：

这是最简单的解决方案。为什么 bootstrap 默认没有内置这个？似乎这种类型的工具提示不会在移动设备上广泛使用。

@erier 这不是内置的，因为在移动设备上你没有鼠标悬停。

如果您需要为某些视口隐藏它们，这是正确的答案。虽然我真的不明白为什么你需要在缺少悬停事件的移动平台上隐藏它们

【参考方案3】：

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

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

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

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

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

【讨论】：

我遇到了同样的问题，这解决了它，谢谢。只是一个小变化，我启用了非移动/非平板电脑，这意味着我使用了if (window.matchMedia("(min-width: 991px)").matches)。

将 max-width 属性替换为 min-width: 768px，以便在除智能手机之外的所有设备上启用工具提示（遵循 Bootstrap 3 标准）

@umezo 你救了我的一天兄弟.. 非常感谢 :)

【参考方案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） 初始化工具提示（）；

【讨论】：

页面上有多个工具提示，这可能会导致内存泄漏，因为您一遍又一遍地重新初始化可能不需要的对象。小心点。

【参考方案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>

【讨论】：

但是该元素也没有显示出来，只是想关闭工具提示，而不是隐藏导致它们的元素。

@RickeyWard 您可以为此添加另一个标签，使用逆逻辑，例如<span class="hidden-md hidden-lg"><!-- whatever works better in mobile --></span> 您也可以将hidden-sm 添加到@pdolinaj 的答案中。 编辑：让我们忘记问题是关于媒体查询的，呵呵