Ocultar Bootstrap Tooltips en dispositivos móviles utilizando consultas de medios

Question

Estoy usando la información sobre herramientas de Bootstrap sobre los botones en mi sitio pero cuando los veo en un dispositivo móvil, estos consejos se activan en el primer clic, lo que significa que tengo que hacer doble clic en el botón. Quiero evitar que estos se muestren en dispositivos móviles y he intentado utilizar consultas de medios para hacerlo. Mi código ha sido:

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

Esto evita que la información sobre herramientas de visualización, pero todavía tengo que hacer clic dos veces para que el botón funcione. ¿Hay alguna manera de evitar que estos tooltips se activen utilizando consultas de medios?

Answer 1

Para habilitar la información sobre herramientas, debe agregar algo como $('#example').tooltip(options) en algún lugar de su código.

Ahora, para desactivar esto para dispositivos móviles, puede usar JavaScript window.matchMedia para especificar una consulta de medios en JavaScript y, por lo tanto, no habilitar la información sobre herramientas para dispositivos más pequeños.

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

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

MatchMedia es compatible con dispositivos móviles Safari de 5 en adelante (entre otros navegadores).

Answer 2

que estaba experimentando el mismo problema, y ​​he encontrado la solución en https://groups.google.com/forum/#!topic/twitter-bootstrap/Mc2C41QXdnI

matchMedia carece de soporte para IE (no es un problema en el móvil), pero también Android 2.2/2.3; http://caniuse.com/matchmedia

También es posible usar window.innerWidth; y comparar esa información con los mismos valores, algo así como:

 

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

]

Y entonces usted puede hacer lo mismo;

 

    if (! isMobile) { 
     initTooltip(); 
    } 

Answer 3

Lo he logrado de manera diferente; Los dispositivos móviles y otros están habilitados con touch, por lo que verifiqué si es un dispositivo táctil o no.

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

Ahora, comprobar si no es una touch device para desencadenar la descripción:

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

Answer 4

sólo tiene que utilizar el indicador importante, ya que la posición sobre herramientas se labra en línea!.

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

Answer 5

La forma más sencilla es añadir la rutina de carga nativa ocultos-xs e información sobre herramientas no se mostrará en las pantallas de móviles.

Ejemplo:

<span title="Your Tooltip Text" data-toggle="tooltip" data-placement="right" aria-hidden="true" class="glyphicon glyphicon-info-sign hidden-xs"></span>