Скрытие всплывающих подсказок на мобильном телефоне с помощью медиа-запросов

Я использую подсказки Bootstrap над кнопками на моем сайте, но при просмотре на мобильном устройстве эти всплывающие подсказки запускаются при первом нажатии, то есть я должен дважды щелкнуть по кнопке. Я хочу, чтобы они не показывались на мобильных устройствах и пытались использовать медиа-запросы для этого. Мой код:

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

Это останавливает отображение всплывающей подсказки, но мне все равно придется дважды щелкнуть, чтобы заставить кнопку функционировать. Есть ли способ предотвратить включение этих всплывающих подсказок с помощью медиа-запросов?

Ответы

Ответ 1

Я добился этого по-другому; Мобильные и другие устройства включены touch, поэтому я проверил, не касается ли оно устройства или нет.

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

Теперь проверьте, не запускает ли touch device инструмент :

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

Ответ 2

Чтобы включить всплывающие подсказки, вы должны добавить что-то вроде $('#example').tooltip(options) в свой код.

Теперь, чтобы отключить это для мобильных устройств, вы можете использовать JavaScript window.matchMedia, чтобы указать медиа-запрос в JavaScript и, таким образом, не включать всплывающие подсказки для небольших устройств.

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

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

MatchMedia поддерживается в мобильных Safari 5 и выше (среди других браузеров).

Ответ 3

Просто используйте флаг! important, поскольку позиция всплывающей подсказки встроена в строку.

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

Ответ 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) {     initTooltip();   }

Ответ 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>