web-dev-qa-db-fra.com

Masquer Bootstrap Info-bulles sur mobile à l'aide de requêtes multimédias

J'utilise les info-bulles de Bootstrap sur les boutons de mon site, mais lorsqu'elles sont affichées sur un appareil mobile, ces info-bulles sont déclenchées au premier clic, ce qui signifie que je dois double-cliquer sur le bouton. Je souhaite empêcher leur affichage sur les appareils mobiles et j'ai essayé d'utiliser des requêtes multimédias pour ce faire. Mon code a été:

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

Cela empêche l'infobulle de s'afficher, mais je dois toujours cliquer deux fois pour que le bouton fonctionne. Existe-t-il un moyen d'empêcher ces info-bulles de se déclencher à l'aide de requêtes multimédias?

twitter-bootstrapresponsive-design
28
natlines

Je l'ai réalisé différemment; Les appareils mobiles et autres sont touch activés, j'ai donc vérifié s'il s'agissait d'un appareil tactile ou non.

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

Maintenant, vérifiez si ce n'est pas un touch device pour déclencher l'info-bulle:

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

Utilisez simplement l'indicateur! Important car la position de l'infobulle est stylisée en ligne.

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

Pour activer les info-bulles, vous devez ajouter quelque chose comme $('#example').tooltip(options) quelque part dans votre code.

Maintenant, pour désactiver cela pour les appareils mobiles, vous pouvez utiliser le code --- window.matchMedia pour spécifier une requête multimédia en JavaScript et donc ne pas activer les info-bulles pour les petits appareils.

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

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

MatchMedia est pris en charge dans Safari 5 mobile et supérieur (entre autres navigateurs).

12
spinningarrow

Je rencontrais le même problème et j'ai trouvé la solution dans https://groups.google.com/forum/#!topic/Twitter-bootstrap/Mc2C41QXdnI

matchMedia ne prend pas en charge IE (pas un problème sur mobile), mais aussi Android 2.2/2.3; http://caniuse.com/ matchmedia

Il est également possible d'utiliser simplement window.innerWidth; et vérifiez cela par rapport aux mêmes valeurs, quelque chose comme:

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


Et puis vous pouvez faire la même chose;
 
 if (! isMobile) {
 initTooltip (); 
} 
 

 1 
Agey
Le moyen le plus simple consiste à ajouter la classe native Bootstrap class hidden-xs et les info-bulles n'apparaîtront pas sur les écrans mobiles.
Exemple:
<span title="Your Tooltip Text" data-toggle="tooltip" data-placement="right" aria-hidden="true" class="glyphicon glyphicon-info-sign hidden-xs"></span>
 0 
pdolinaj