Nascondere i suggerimenti Bootstrap sul cellulare utilizzando le query dei supporti

Question

Sto usando i suggerimenti Bootstrap sui pulsanti del mio sito ma quando vengono visualizzati su un dispositivo mobile, questi suggerimenti vengono attivati ​​al primo clic, ovvero devo fare doppio clic sul pulsante. Voglio impedire che vengano visualizzati sui dispositivi mobili e ho provato a utilizzare le query multimediali per farlo. Il mio codice è stato:

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

Questo arresta il tooltip di visualizzare, ma ho ancora necessario fare clic due volte per ottenere il pulsante di funzionare. C'è un modo per impedire l'attivazione di questi tooltip usando le query multimediali?

Answer 1

Per abilitare le descrizioni comandi, è necessario aggiungere qualcosa come $('#example').tooltip(options) da qualche parte nel codice.

Ora, per disabilitare questo dispositivo per dispositivi mobili, è possibile utilizzare JavaScript window.matchMedia per specificare una query multimediale in JavaScript e quindi non abilitare le descrizioni comandi per dispositivi più piccoli.

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

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

MatchMedia è supportato in mobile Safari 5 e versioni successive (tra gli altri browser).

Answer 2

stavo sperimentando lo stesso problema, e ho trovato la soluzione in https://groups.google.com/forum/#!topic/twitter-bootstrap/Mc2C41QXdnI

Matchmedia manca il supporto per IE (non è un problema sul cellulare), ma anche Android 2.2/2.3; http://caniuse.com/matchmedia

È anche possibile utilizzare window.innerWidth; e controllare che contro gli stessi valori, qualcosa di simile:

 

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

]

E poi si può fare la stessa cosa;

 

    if (! isMobile) { 
     initTooltip(); 
    } 

Answer 3

L'ho raggiunto in modo diverso; Mobile e altri dispositivi sono abilitati touch, quindi ho controllato se si tratta di dispositivo touch o no.

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

Ora, verificare se non è un touch device per attivare il tooltip:

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

Answer 4

basta usare la bandiera importante in quanto la posizione tooltip è in stile in linea!.

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

Answer 5

Il modo più semplice è quello di aggiungere classe Bootstrap nativo hidden-xs e suggerimenti non verranno visualizzati su schermi mobili.

Esempio:

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