टच फ्रेंडली टूलटिप

Question

किसी को भी एक jquery टूल टिप के बारे में पता है जिसमें मोबाइल उपकरणों के लिए समाधान शामिल है? चूंकि होवर राज्य काम नहीं करता है, मुझे लगता है कि मुझे ऐसा कुछ चाहिए जो क्लिक पर काम करता है। शायद यह क्लिक पर एक मॉडल बॉक्स की तरह व्यवहार करता है? बस यहाँ सामान फेंकना। सुनिश्चित नहीं है कि सबसे अच्छा समाधान क्या होगा।

- अपडेट -

मैं वास्तव में समाधान @Alveoli सुझाव दिया, लेकिन मैं अपने आप को इस पर एक चाकू ले जा रहा समाप्त हो गया है। मैंने qTip का उपयोग अपने आधार के रूप में किया और कुछ फ्रैंकस्टाइन कोड को टच फ्रेंडली टूलटिप्स और मोबाइल फ्रेंडली मोडल बॉक्स बनाने के लिए लिखा। कोड को अनुकूलित करने में कोई भी मदद की सराहना की जाएगी। यहां पहेली है ... http://jsfiddle.net/cssguru/NQRBT/

Answer 1

मैं एक ही बात के लिए देख रहा हूँ और इस सुरुचिपूर्ण समाधान पाया:

http://osvaldas.info/blog/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

बोनस है कि एक मोबाइल पर यह चिपक 'जब आप इसे छूने और गायब हो जाता है जब आप इसे फिर से स्पर्श है।

Answer 2

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

ताजा उपयोगकर्ताओं को ध्यान में रखते हुए हमेशा कार्यों को पूरा करने के लिए अधिक समय चाहिए, मुझे लगता है कि यह टूलटिप को लागू करने का एक अच्छा तरीका है। वरिष्ठ उपयोगकर्ताओं को परेशान नहीं किया जाएगा जबकि कुछ समय बाद ताजा उपयोगकर्ता टूलटिप देख सकते थे।

Answer 3

आप jQuery UI Tooltip का उपयोग करें और यह सुनिश्चित करें कि टूलटिप पेज में किसी भी स्पर्श को बंद रहता है इस प्रकार बना सकता है:

initTooltip = function ($el) { 
    var closeTooltipOnClick = function (e) { 

     // This code if for touch devices only. 
     // We want to tooltip to close, when we touch 
     // anywhere on the page, except if we touch on 
     // the link itself. 

     if ($(e.target).closest($el).size()) { 
      // We just clicked on the link, so let's 
      // not close the tooltip. 
      return; 
     } 

     $('body').off('touchend', closeTooltipOnClick); 
     $el.tooltip('close'); 
    }; 

    $el.tooltip({ 
     open: function() { 

      if (!Modernizr.touchevents) { 
       return; 
      } 
      // We make sure that the tootlip closes on 
      // touch devices if there is a touch event anywhere. 
      $('body').on('touchend', closeTooltipOnClick); 
     } 
    }); 
};