Tippy.js - हल्के वेनिला जावास्क्रिप्ट टूलटिप लाइब्रेरी
टूलटिप्स अतिरिक्त सामग्री के छोटे टुकड़े दिखाने के लिए उपयोगी होते हैं। वे पृष्ठ पर स्थान बचाते हैं और आपको एक कमरे को चेतन करने के लिए देते हैं जो लोगों का ध्यान आकर्षित करता है.
अतीत में, हमने टूलटिप स्क्रिप्ट को कवर किया है लेकिन कई डेवलपर्स कस्टम लाइब्रेरी चाहते हैं। कुछ jQuery पसंद करते हैं, अन्य सरल वेनिला JS चाहते हैं.
टिप्पी प्लगइन बाद वाले समूह के लिए सबसे अच्छा काम करता है जो वेनिला जेएस कोड के साथ काम करना चाहते हैं.
Tippy.js के साथ आप ए पूरी तरह से काम कर रहे टूलटिप पुस्तकालय Popper.js के शीर्ष पर चल रहा है। इसका मतलब है कि प्लगइन एक छोटी निर्भरता के साथ आता है, लेकिन यह jQuery लाइब्रेरी की तुलना में प्रबंधित करने के लिए बहुत आसान है.
तो टिप्पी की खूबसूरती क्या है? यह बनाने के लिए डिफ़ॉल्ट पॉपर शैलियों को जोड़ता है अधिक गतिशील टूलटिप्स अविश्वसनीय प्रभाव के साथ.
आप फ़ेड्स, स्लाइड्स, विगल्स, कस्टम ड्यूरेशन, कॉलबैक मेथड और यहां तक कि डायनामिक इफेक्ट्स जैसे ऑटो-रोटेटिंग टूलटिप्स जोड़ सकते हैं.
वास्तव में यह प्लगइन आपके टूलटिप्स को अच्छी तरह से परिभाषित प्रयोज्य विशेषताओं के साथ एक पूरे नए स्तर तक ले जाएगा। आप रख सकते हैं टूलटिप्स निश्चित पृष्ठ तत्वों के साथ स्क्रीन पर नियत हैं, या अगर स्क्रीन बहुत छोटा हो जाता है, तो उन्हें अभिविन्यास बदल दें.
यह स्पर्श उपकरणों का भी समर्थन करता है जो उत्तरदायी लेआउट के लिए इसे सही बनाता है। टूलटिप HTML को अधिकतम पहुंच के लिए ARIA मानकों का उपयोग करके लेबल किया गया है। मैं इस प्लगइन के बारे में कुछ भी बुरा नहीं कह सकता!
यदि आप अपनी साइट में यह कोशिश करना चाहते हैं तो बस GitHub से स्रोत कोड की एक प्रति डाउनलोड करें। इसमें npm का उपयोग करके इसे स्थापित करने के तरीके के विवरण के साथ मुख्य प्लगइन फाइलें शामिल हैं.
डिफ़ॉल्ट Tippy.js स्क्रिप्ट फ़ाइल Popper.js के साथ आती है, इसलिए आपको उस अतिरिक्त लाइब्रेरी को डाउनलोड करने की भी आवश्यकता नहीं है। आपको केवल डिफ़ॉल्ट JS / CSS फ़ाइल और टूलटिप्स चलाने के लिए एक वेबपेज की आवश्यकता है.
यदि आप कुछ उदाहरणों में आगे खुदाई करना चाहते हैं तो Tippy.js होमपेज पर एक नज़र डालें जिसमें लाइव नमूने + कोड स्निपेट शामिल हैं जिन्हें आप कॉपी और पुन: उपयोग कर सकते हैं.
