Hiding Bootstrap Tooltips auf Mobile Media Queries mit

Question

I Bootstrap des Tooltips über Tasten auf meiner Website verwende aber wenn es auf einem mobilen Gerät angezeigt werden diese Tooltips auf dem ersten Klick ausgelöst, das heißt ich auf die Schaltfläche klicken, um das Doppelte haben. Ich möchte verhindern, dass diese auf mobilen Geräten angezeigt werden, und habe versucht, Medienabfragen zu verwenden. Mein Code hat:

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

Dieser Tooltip von der Anzeige stoppt, aber ich habe noch zweimal zu klicken Sie auf die Taste, um zu funktionieren. Kann ich irgendwie verhindern, dass diese Tooltips mit Medienabfragen ausgelöst werden?

Answer 1

Tooltips zu aktivieren, müssen Sie so etwas wie $('#example').tooltip(options) irgendwo in Ihrem Code hinzufügen.

Jetzt, um dies für mobile Geräte zu deaktivieren, können Sie JavaScript window.matchMedia verwenden, um eine Medienabfrage in JavaScript anzugeben und somit Tooltips für kleinere Geräte nicht zu aktivieren.

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

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

MatchMedia wird in mobilen Safari 5 und höher (neben anderen Browsern) unterstützt.

Answer 2

ich das gleiche Problem erlebt, und ich fand die Lösung in https://groups.google.com/forum/#!topic/twitter-bootstrap/Mc2C41QXdnI

Matchmedia Unterstützung für IE fehlt (kein Thema auf Handy), sondern auch Android 2.2/2.3; http://caniuse.com/matchmedia

Es ist auch möglich, nur window.innerWidth zu verwenden; und prüfen, ob gegen die gleichen Werte, so etwas wie:

 

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

]

Und dann können Sie das gleiche tun;

 

    if (! isMobile) { 
     initTooltip(); 
    } 

Answer 3

Ich habe es anders erreicht; Mobile und andere Geräte touch aktiviert, so habe ich gecheckt, ob es Touch-Gerät ist oder nicht.

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

nun prüfen, ob es nicht ein touch device ist die Tooltip auslösen:

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

Answer 4

Verwenden Sie einfach die wichtigen Flagge, da die Tooltip Position Inline gestylt!.

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

Answer 5

Der einfachste Weg ist nativer Bootstrap Klasse versteckten xs und Tooltips auf mobilen Bildschirmen zeigen, nicht zu addieren.

Beispiel:

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