simpleTooltip: HTML सीएसएस के साथ भरवां और jQuery के साथ सुगंधित

हर कोई जानता है कि टूलटिप क्या है । कोई उन्हें बेहद उपयोगी पाता है, जबकि कोई उन्हें दरकिनार कर देता है। भाग्य ने मुझे पहली श्रेणी में वर्गीकृत करने का फैसला किया।

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

खाना पकाने से पहले पढ़ें

मैं ध्यान देता हूं कि यह विचार नया नहीं है और एक समान कार्यान्वयन सबसे अधिक संभावना है। इसलिए, यदि आप पहले से ही कुछ टूलटिप्स खा चुके हैं और नहीं चाहते हैं, तो इस रेसिपी को पढ़ने से मना कर दें, क्योंकि यह सिर्फ एक सबक है, जिसका मुख्य नैतिक तरीका है: फ्रंटएंड पर उपयोग किए गए कोड का उपयोग किया जाना चाहिए, और क्लाइंट को नहीं दिया जाना चाहिए।

आटा तैयार करें - कुछ HTML लें

हम अक्सर आटा तैयार करते हैं और हम दांतों द्वारा नुस्खा जानते हैं - इस स्तर पर हम एक नियमित ऑपरेशन करेंगे: लिंक के साथ एचटीएमएल मार्कअप बनाएं, जिनमें से प्रत्येक एक संकेत और एक दिशा पिछले एक से अलग होगा:

<section> <div> <a href="#" data-tooltip="nw" title="This is an example of Northwest gravity">Northwest</a> </div> <div> <a href="#" data-tooltip="north" title="This is an North gravity">North</a> </div> <div> <a href="#" data-tooltip="ne" title="This is an example of Northeast gravity">Northeast</a> </div> <div> <a href="#" data-tooltip="west" title="This is an example of West gravity">West</a> </div> <div> <h3>simpleTooltip</h3> </div> <div> <a href="#" data-tooltip="east" title="This is an example of East gravity">East</a> </div> <div> <a href="#" data-tooltip="sw" title="This is an example of Southwest gravity">Southwest</a> </div> <div> <a href="#" data-tooltip="south" title="This is an example of South gravity">South</a> </div> <div> <a href="#" data-tooltip="se" title="This is an example of Southeast gravity">Southeast</a> </div> </section> 

एक तत्व जिसमें एक संकेत होना चाहिए उसे दो विशेषताओं को सौंपा जाना चाहिए:

• data-tooltip - टूल बॉडी ऑफसेट।
  
  
  • nw - उत्तरपश्चिम
  • उत्तर - उत्तर
  • पूर्वोत्तर - पूर्वोत्तर
  • पश्चिम - पश्चिम
  • पूर्व - पूर्व
  • स्व - दक्षिण-पश्चिम
  • दक्षिण - दक्षिण
  • se - दक्षिण पूर्व
  
  
• शीर्षक - पाठ।

तो, हमारे पास भविष्य के पकवान के लिए आठ मूल तैयार हैं। हम प्रत्येक ने अपने तरीके से सीज़न किया और अब भरने की तैयारी शुरू करने का समय है।

स्टफिंग: यह देखने के लिए जांचें कि क्या आपने CSS से बाहर भाग लिया है

भरने को स्वादिष्ट होना चाहिए, और इसलिए हम किसी भी अशुद्धियों और हानिकारक पदार्थों का उपयोग नहीं करेंगे। केवल, जैसा कि इसे कभी-कभी कहा जाता है, एक प्राकृतिक उत्पाद शुद्ध सीएसएस है। हमें छद्म तत्वों की आवश्यकता होगी :before और :after , शुरुआत और अंत पंक्ति संशोधक ( ^ , $ ) और CSS attr () फ़ंक्शन के साथ चयनकर्ताओं को विशेषता दें। यह सुनिश्चित करने के बाद कि सामग्री उपलब्ध है, आप खाना बनाना शुरू कर सकते हैं।

गंध

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

आधार शैली

 #tooltip_width { float:left; } #tooltip_width, [data-tooltip]:before, [data-tooltip]:after { display:none; font:normal 11px/24px Arial; } [data-tooltip]:before, [data-tooltip]:after { position:absolute; z-index:1000; } [data-tooltip]:before { content:attr(data-title); color:#fff; padding:0 5px; border-radius:2px; background:rgba(0,0,0,.8); text-align:center; white-space:nowrap; } [data-tooltip]:after { content:''; height:0; width:0; border:solid transparent; border-width:5px; pointer-events:none; } [data-tooltip]:hover:before, [data-tooltip]:hover:after { display:block; } 

छद्म तत्व :after - माता-पिता के लिए सजावटी तीर-सूचक, पाठ :before टूलटिप का शरीर। और एक और बात: आपने सिर्फ #tooltip_width के साथ तत्व के नियमों पर ध्यान दिया है, लेकिन आपको पता नहीं है कि इसकी आवश्यकता क्यों है। तो वह कुक से एक विशेष पाउडर है और टिप की चौड़ाई को मापने के लिए आवश्यक है। प्रारंभ में, भविष्य के पकवान के विचार को चित्रित करने के चरण में, सूत्र के अनुसार चौड़ाई की गणना करने की योजना बनाई गई थी:

 width = text.length * 5; // -         (Arial, 11px) 

लेकिन इस दृष्टिकोण को दो कारणों से बर्बाद किया गया:

• लैटिन अक्षर, औसतन, साइरिलिक के रूप में व्यापक नहीं हैं (~ 5px) (~ 6.5px);
• समीकरण ने विभिन्न चौड़ाई के वर्णों की समान संख्या प्रदान नहीं की। उदाहरण के लिए, " iii " चौड़ाई में " WWW " के बराबर नहीं होगा।

नई विधि, सभी विशेषताओं को ध्यान में रखते हुए, निम्नानुसार काम करती है: टूलटिप पाठ को समान फ़ॉन्ट आकार सेटिंग्स के साथ एक अदृश्य, फ्लोटिंग ( float:left ) ब्लॉक में रखा जाता है, फिर इसकी चौड़ाई को मापा जाता है और इसे DOM से हटा दिया जाता है, जिससे आप अगले टूलटिप की चौड़ाई प्राप्त कर सकते हैं। एक ही तत्व का उपयोग कर।

संशोधक के साथ चयनकर्ताओं को आकर्षित करें

गुणों को समूहीकृत करने का एक अच्छा विकल्प। आप उनके बिना कर सकते हैं, साथ ही बिना रोटी के सूप / बोर्स् खा सकते हैं, लेकिन फिर भी यह उनके साथ स्वादिष्ट होगा।

दिशा के नाम, जैसे: nw और ne लैटिन अक्षर n से शुरू होते हैं और इसमें सामान्य गुण होते हैं - यह हमारे हाथों में खेलता है और हम इस रूप में उनके नियमों का वर्णन कर सकते हैं:

 [data-tooltip^=n]:before, [data-tooltip^=n]:after { top:100%; } [data-tooltip^=n]:before { margin-top:5px; } [data-tooltip^=n]:after { margin-top:-5px; border-bottom-color:rgba(0,0,0,.8); } 

याद रखें कि में :before छद्म तत्व :before पाठ स्थित है, और :after सजावटी सूचक के रूप में कार्य करता है। यह कोड nw , ne और उत्तर दिशाओं के लिए काम करता है और छद्म तत्वों को 100% नीचे शिफ्ट करता है: पाठ 5 चलता है (5px कम ऊंचाई और पॉइंटर की चौड़ाई आधी है), और तीर भी अधिक है - यह आपको टूलटिप निकाय के लिए "चुंबकित" करने की अनुमति देता है।



नीली रेखा top:100% , लाल रेखा margin-top:5px ।

वही स्व , से और दक्षिण के लिए जाता है, केवल ऑफसेट को निर्देशित किया जाता है:

 [data-tooltip^=s]:before, [data-tooltip^=s]:after { bottom:100%; } [data-tooltip^=s]:before { margin-bottom:5px; } [data-tooltip^=s]:after { margin-bottom:-5px; border-top-color:rgba(0,0,0,.8); } 

जैसा कि आपने अनुमान लगाया होगा, विस्थापन की दिशा के लिए सभी नामों का चयन किया जाता है ताकि उन्हें आसानी से समूहों में जोड़ा जा सके। आइए अब पंक्ति संशोधक के अंत का उपयोग करके nw , ne , sw , se , उत्तर और दक्षिण की सामान्य शैलियों का वर्णन करें:

 [data-tooltip$=w]:before, [data-tooltip$=w]:after, [data-tooltip$=th]:before, [data-tooltip$=th]:after { left:50%; } [data-tooltip$=w]:before { margin-left:-15px; } [data-tooltip$=w]:after, [data-tooltip$=th]:after { margin-left:-5px; } [data-tooltip$=e]:before, [data-tooltip$=e]:after { right:50%; } [data-tooltip$=e]:before { margin-right:-15px; } [data-tooltip$=e]:after { margin-right:-5px; } 

नीली रेखा right:50% , लाल margin-right:-5px , ग्रीन margin-right:-15px ।

अब हम दो शेष दिशाओं के लिए व्यवहार का वर्णन करते हैं - पूर्व और पश्चिम :

 [data-tooltip$=st]:before, [data-tooltip$=st]:after { bottom:50%; } [data-tooltip$=st]:after { margin-bottom:-5px; } [data-tooltip$=st]:before { margin-bottom:-12px; } [data-tooltip=west]:before, [data-tooltip=west]:after { left:100%; } [data-tooltip=west]:before { margin-left:10px; } [data-tooltip=west]:after { margin-right:-10px; border-right-color:rgba(0,0,0,.8); } [data-tooltip=east]:before, [data-tooltip=east]:after { right:100%; } [data-tooltip=east]:before { margin-right:10px; } [data-tooltip=east]:after { margin-left:-10px; border-left-color:rgba(0,0,0,.8); } 

उपरोक्त कोड में, निम्न कोड अजीब लग सकता है: margin-bottom:-12px; । वह टिप अप के आधे शरीर के विस्थापन के लिए जिम्मेदार है। 12 आधा क्यों है? क्योंकि बहुत शुरुआत में हमने निम्नलिखित नियम का उपयोग करके लाइन की ऊंचाई को 24px के बराबर निर्दिष्ट किया था:

 font:normal 11px/24px Arial; //   Arial   11px     24px 

नीली रेखा bottom:50% , लाल margin-bottom:-5px , हरा margin-bottom:-12px ।

काम उबल रहा है: आटा सूजा हुआ है और समय पर भरने के लिए इंतजार कर रहा है। हम सामान के लिए भागते हैं और उस पाउडर के बारे में याद करते हैं जिसके बिना हमारा पकवान सौंदर्यवादी रूप से प्रसन्न नहीं होगा।

क्या आपके पास अपने अंतिम खाना पकाने से थोड़ा सा jQuery है?

द्वारा और टूलटिप्स को अब भर कर खाया जा सकता है, लेकिन ऐसा करने से पहले आपको कुछ जानना होगा:

• यदि टूलटिप में बहुत अधिक पाठ है, तो यह white-space:nowrap लिए इसकी पूरी चौड़ाई में एक पंक्ति में फैल जाएगा white-space:nowrap ;
• यदि टूलटिप के साथ तत्व में स्थिर स्थिति ( position:static; ) है, जो सभी तत्वों में एक विशिष्ट position नियम के बिना है, तो टूलटिप ठीक से काम नहीं करेगा यह बिल्कुल तत्व तैनात है;
• यदि टूलटिप दिशा उत्तर या दक्षिण में सेट है, तो यह 100% पूर्ण स्थिति और अंतर्निहित चौड़ाई के कारण मेल नहीं खाएगा।

इसके आधार पर, जब आप सुनिश्चित हों कि आप जावास्क्रिप्ट का उपयोग नहीं कर सकते हैं:

• एक तत्व के बारे में एक संकेत के साथ या बिल्कुल तैनात;
• टूलटिप की दिशा दक्षिणी या उत्तरी को छोड़कर, कोई भी है;
• टूलटिप टेक्स्ट में बहुत अधिक स्क्रीन स्पेस नहीं होता है।

अन्यथा, यहां आपके लिए एक पाउडर है:

 /** * @param (int)   . */ (function(){ $.simpleTooltip = function(max){ var max = max ? max : 300, body = $('body'), t = !1; $('[data-tooltip]').each(function(){ t = $(this); t.attr('data-title', this.title).removeAttr('title'); /** *  ,  ,   , *     ,    . */ if (t.css('position') == 'static') { t.css('position', 'relative'); } }).on('mouseenter mouseleave', function(e){ if (e.type == 'mouseenter') { t = $(this); /** *              *          . */ body.append('<div id="tooltip_width">'+ t.data('title') +'</div>'); var width = $('#tooltip_width').width(), styles = ''; /** *    ,      @max   *   . */ if (width > max) { width = max, styles = '[data-tooltip]:before{width:'+ width +'px;text-align:left;line-height:17px;padding:2px 5px;white-space:normal}'; } /** *       ,      : *      padding   ,    *      ,   . */ if (t.data('tooltip').slice(-2) == 'th') { styles += '[data-tooltip$=th]:before{margin-left:-'+ ((width + 10) / 2) +'px}'; } /** *    ,  ,  ,   DOM    *    . ,      *     ,    . */ if (styles) { body.append('<style id="tooltip_style">'+ styles +'</style>'); } } else { $('#tooltip_style, #tooltip_width').remove(); } }); }; })(jQuery); $(document).ready(function(){ $.simpleTooltip(); }); 

फ़ंक्शन के लिए एकमात्र संभव तर्क पिक्सल में और सभी टूलटिप्स के लिए परिभाषित अधिकतम चौड़ाई हो सकती है। इसे इस तरह से सेट किया गया है:

 $.simpleTooltip(400); //  , 400    -     . 

प्लगइन के चरणों के रूप में, उन्हें कोड में टिप्पणियों में वर्णित किया गया है और, मुझे उम्मीद है, एक सुलभ भाषा में।

विश्व में व्याप्त कुसंस्कार

• IE8 - HEX के साथ RGBA रंग प्रारूप की जगह। कोई गोल कोना * ।
• अन्य ब्राउज़र जो attr () CSS फ़ंक्शन और छद्म तत्वों का समर्थन करते हैं, वे मुसीबतों को नहीं पहचानते हैं।

* - स्रोत फ़ाइलों में कोनों.htc होता है, जो कोनों को बंद करने के लिए MS ब्राउज़र के पुराने संस्करणों को बाध्य करेगा, लेकिन इस फ़ाइल का आकार 4Kb है, जो इसके बिना संपूर्ण प्रोजेक्ट की फ़ाइलों के आकार से 1Kb बड़ा है।

महाराज से

सारांश:

पकवान तैयार है। यह न तो फालतू है और न ही सनकी। यह अपने फायदे और नुकसान के साथ साधारण भोजन है, और केवल आप ही तय कर सकते हैं कि किसके साथ भोजन करना है। लेकिन ध्यान दें: बिना कोशिश किए और आपको पता नहीं चलेगा कि आपको कुछ पसंद है या नहीं।

उम्मीदों:

मुझे उम्मीद है कि नुस्खा बहुत जटिल नहीं था और प्रत्येक आइटम को एक बहुत ही स्पष्ट विवरण दिया गया था। लेकिन, किसी भी मामले में, सवाल निषिद्ध नहीं हैं।

उपयोगी सामग्री

• http://firstvector.org/simpleTooltip - कार्य का प्रदर्शन;
• https://github.com/BR0kEN-/simpleTooltip - GitHub पर भंडार;

समाप्त कर लो

संस्करण 1.0 इसके बिना IE8 * या 1.0.1 के लिए समर्थन के साथ।

* - संस्करण 1.0 में टूलटिप पाठ को data-title विशेषता में रखना आवश्यक है।

स्वास्थ्य पर प्रयोग करें!