मीडिया क्वेरीज़ का उपयोग कर मोबाइल पर छिपाने वाले बूटस्ट्रैप टूलटिप्स

Question

मैं अपनी साइट पर बटन पर बूटस्ट्रैप के टूलटिप्स का उपयोग कर रहा हूं लेकिन मोबाइल डिवाइस पर देखे जाने पर, इन टूलटिप्स को पहले क्लिक पर ट्रिगर किया जाता है, जिसका अर्थ है कि मुझे बटन पर डबल क्लिक करना होगा। मैं इन्हें मोबाइल उपकरणों पर दिखाए जाने से रोकना चाहता हूं और ऐसा करने के लिए मीडिया प्रश्नों का उपयोग करने का प्रयास किया है। मेरे कोड किया गया है:

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

यह प्रदर्शित करने से टूलटिप बंद हो जाता है, लेकिन मैं अभी भी दो बार क्लिक करने के लिए बटन कार्य करने के लिए प्राप्त करने के लिए किया है। क्या कोई तरीका है कि मैं इन टूलटिप्स को मीडिया प्रश्नों का उपयोग करके फायरिंग से रोक सकता हूं?

Answer 1

टूलटिप्स सक्षम करने के लिए, आपको अपने कोड में $('#example').tooltip(options) जैसे कुछ जोड़ना होगा।

अब, मोबाइल उपकरणों के लिए इसे अक्षम करने के लिए, आप जावास्क्रिप्ट में मीडिया क्वेरी निर्दिष्ट करने के लिए जावास्क्रिप्ट के window.matchMedia का उपयोग कर सकते हैं और इस प्रकार छोटे उपकरणों के लिए टूलटिप्स सक्षम नहीं कर सकते हैं।

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

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

MatchMedia मोबाइल सफारी 5 और ऊपर (अन्य ब्राउज़रों के बीच) में समर्थित है।

Answer 2

मैं एक ही समस्या का सामना कर रहा था, और मैं https://groups.google.com/forum/#!topic/twitter-bootstrap/Mc2C41QXdnI

में समाधान matchMedia का अभाव है आईई (मोबाइल पर नहीं एक मुद्दा) के लिए समर्थन है, लेकिन पाया भी एंड्रॉयड 2.2/2.3; http://caniuse.com/matchmedia

विंडो.इनरविड्थ का उपयोग करना भी संभव है; और जाँच लें कि एक ही मान के खिलाफ, कुछ की तरह:

 

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

Answer 3

मैंने इसे अलग-अलग हासिल किया है; मोबाइल और अन्य डिवाइस touch सक्षम हैं, इसलिए मैंने जांच की है कि यह स्पर्श डिवाइस है या नहीं।

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

अब, जांचें कि क्या इसका touch device नहीं है टूलटिप को गति प्रदान करने: के बाद से टूलटिप स्थिति स्टाइल इनलाइन है

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

Answer 4

बस महत्वपूर्ण ध्वज का उपयोग करें।

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

Answer 5

सबसे आसान तरीका देशी बूटस्ट्रैप वर्ग छिपा-XS और टूलटिप्स जोड़ने के लिए मोबाइल स्क्रीन पर दिखाई नहीं देगा।

उदाहरण:

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