सीएसएस, जावास्क्रिप्ट, और jQuery के साथ 40+ उपयोगी उपकरण लिपियों

एक दिलचस्प यूआई तत्व, टूलटिप्स (जिसे इंफोटिप्स भी कहा जाता है) एक छोटा बॉक्स बनाते हैं, जब माउस कर्सर सूचना के साथ एक निश्चित पाठ या छवि पर मँडरा जाता है तत्व के ऊपर मंडराया जा रहा है। उपयोगकर्ता अनुभव के संदर्भ में, टूलटिप्स उपयोगकर्ताओं को सूचना का सबसे तेज और आसान स्रोत प्रदान करते हैं बिना कुछ क्लिक किए.

यद्यपि आपके पाठ में टूलटिप्स जोड़ने का सबसे सरल तरीका HTML टैग का उपयोग करना है या TITLE =””, alt =””. हालांकि, कुछ वास्तव में अच्छे हैं टूलटिप्स डिज़ाइन और स्टाइल जिन्हें आप जावास्क्रिप्ट और सीएसएस के साथ बना सकते हैं टूलटिप स्क्रिप्ट का उपयोग करना। चलो एक नज़र डालते हैं.

सीएसएस

Balloon.css - बैलून CSS लाइब्रेरी है सास और लेस के साथ मिलकर बनी एक इंटरेक्टिव टूलटिप दिखाने के लिए। टूलटिप की सामग्री और स्थिति के माध्यम से विन्यास योग्य हैं डेटा- विशेषता। आप टूलटिप को बाएँ, दाएँ या बाएँ-दाएँ पर दिखा सकते हैं। तुम भी सामग्री में Emojis जोड़ें. Balloon.css को NPM के माध्यम से स्थापित किया जा सकता है या इसे CDNJS से लोड किया जा सकता है.

Simptip - सास को सक्षम करने के साथ बनाया गया अपनी आवश्यकता को पूरा करने के लिए कोड को फिर से कॉन्फ़िगर करें और पुन: व्यवस्थित करें. टूलटिप स्थिति और सामग्री वर्ग नाम और के माध्यम से विन्यास योग्य है डेटा-टूलटिप विशेषता। Simptip एक के रूप में उपलब्ध है एनपीएम, यार्न और बोवर पैकेज.

Hint.css - टूलटिप को प्रदर्शित करने के लिए लोकप्रिय सीएसएस पुस्तकालयों में से एक, Hint.css का उपयोग कई लोकप्रिय वेबसाइटों जैसे Fiverr, Webflow, और Tridiv द्वारा किया जाता है। अन्य दो सीएसएस पुस्तकालयों के विपरीत, Hint.css उपयोग करता है aria-लेबल आप वर्ग नामों के माध्यम से आकार और रंग को कॉन्फ़िगर कर सकते हैं BEM पद्धति का उपयोग करना। Hint.css NPM, Bower और CDNJS पर उपलब्ध है.

microtip - टूलटिप के साथ निर्मित करने के लिए एक और भयानक सीएसएस पुस्तकालय “सरल उपयोग” मन में, माइक्रोटिप का उपयोग करता है aria-लेबल टूलटिप सामग्री रखने के लिए और डेटा- टूलटिप के आकार और स्थिति को कॉन्फ़िगर करने की विशेषता.

यह CSS वैरिएबल का उपयोग करता है जो आपको टूलटिप को केवल सादे ol 'CSS फ़ाइल के साथ कस्टमाइज़ करने की अनुमति देता है। सीएसएस चर कई वेब और मोबाइल ब्राउज़रों में पहले से ही समर्थित हैं। माइक्रोटिप एक एनपीएम, यार्न पैकेज और UNPkg CDN के रूप में उपलब्ध है.

Wenk - यह सिर्फ 733 बाइट्स है। एक सुपर लाइटवेट लाइब्रेरी CSSNext, LESS और SCSS का उपयोग करके एक सुपर-आधुनिक CSS में लिखा गया है इसलिए आप अपनी पसंद के अनुसार शैलियों को अनुकूलित और पुन: व्यवस्थित कर सकते हैं। वेंक को एनपीएम, यार्न और निम्न मुफ्त सीडीएन सेवाओं से डाउनलोड किया जा सकता है: rawgit.com और unpkg.com.

Tooltippy - एक और हल्के सीएसएस पुस्तकालय आकार में केवल 1 केबी के आसपास। टूलटिप में टूलटिप को स्टाइल करने के लिए कई प्री-मेड थीम शामिल हैं। यह स्टाइलस नाम के एक सीएसएस प्री-प्रोसेसर के साथ लिखा गया है। निर्देश देखें कि आप कैसे कर सकते हैं इन थीम को विस्तारित या अनुकूलित करें.

ElegantTips - यह पुस्तकालय कुछ के साथ आता है पूर्व निर्मित विषय प्रदान किए गए वर्ग नामों के साथ बदला जा सकता है। अन्य पुस्तकालयों के विपरीत जो HTML5 पर निर्भर करते हैं डेटा- या aria-लेबल विशेषता, ElegantTips को टूलटिप बनाने के लिए अतिरिक्त तत्व की आवश्यकता होती है। यह आपको अनुमति देता है साधारण पाठ से परे टूलटिप में शाब्दिक रूप से कोई भी सामग्री जोड़ें.

Tootik - इतना ही नहीं यह CSS लाइब्रेरी CSS, LESS और SasS फॉर्मेट में स्टाइलशीट प्रदान करता है, यह एक a भी प्रदान करता है टूलटिप को अनुकूलित करने के लिए आसान-से-उपयोग GUI. आप बस इस टूल द्वारा उत्पन्न HTML को कॉपी और पेस्ट कर सकते हैं। यह इत्ना आसान है.

VanillaJS

TippyJS - Popper.js द्वारा संचालित, TippyJS एक के साथ आता है टूलटिप को कॉन्फ़िगर करने के लिए विकल्पों की बहुतायत. हम एनिमेशन, टूलटिप तीर, चौड़ाई, आकार, थीम और बहुत कुछ अनुकूलित कर सकते हैं। यह कॉलबैक फ़ंक्शन भी प्रदान करता है जिसके साथ आप कर सकते हैं एक फ़ंक्शन निष्पादित करें जब टूलटिप दिखाया और छिपा हुआ हो. ये विशेषताएं टूलिप बनाने के लिए हमारी सूची में हमारे शक्तिशाली जावास्क्रिप्ट पुस्तकालयों में से एक टिप्पीजेएस बनाती हैं.

दर्सन टूलटिप - यह पुस्तकालय एक टूलटिप का मूल कार्यान्वयन प्रदान करता है। फिर भी, यह टॉटिप व्यवहार को कॉन्फ़िगर करने के लिए व्यापक विकल्प प्रदान करता है, और ए टूलटिप उपस्थिति को बदलने के लिए वर्ग नामों का सेट. टूलटिप IE9 जैसे पुराने ब्राउज़र में अच्छी तरह से काम करता है और, यदि आवश्यक हो, तो IE8 कुछ समायोजन के साथ.

bubb - बुब उन्नत जावास्क्रिप्ट उपयोगकर्ताओं के लिए अच्छी तरह से अनुकूल हो सकता है। इसके प्रयोग से व्यापक एपीआई, सरल पाठ प्रदर्शित करने से अलग, आप टूलटिप में अधिक जटिल HTML सामग्री जोड़ सकते हैं। यह बहुत अच्छा है; आप डॉक्स का उदाहरण देख सकते हैं.

पॉपर - कुछ बनाने के लिए एक तकनीकी अमूर्त समाहित करता है “हलका”, एक टूलटिप, एक पॉपओवर और ड्रॉप-डाउन की तरह. TippyJS इसे लाइब्रेरी फाउंडेशन के रूप में उपयोग करता है और इसे वेब पर बड़े नामों जैसे बूटस्ट्रैप, माइक्रोसॉफ्ट, और एटलसियन द्वारा उपयोग किया जाता है.

YY टूलटिप - अन्य पुस्तकालयों के विपरीत, YY टूलटिप आपको HTML तत्व या विशेषताओं को जोड़ने की आवश्यकता नहीं है. यह पूरी तरह से जावास्क्रिप्ट के साथ काम करता है और सामग्री, स्थिति और रंग, HTML तत्व के बजाय एक ऑब्जेक्ट में परिभाषित किए जाते हैं। यह एक पूर्ण जावास्क्रिप्ट वेब अनुप्रयोग के साथ संयोजन में उपयोग करने के लिए एकदम सही है.

Position.js - टूलटिप्स, स्थिति.जेएस बनाने के लिए एक और उत्कृष्ट देशी जावास्क्रिप्ट लाइब्रेरी फ़ंक्शन को कॉन्फ़िगर करने और वहां उत्पन्न कोड को कॉपी और पेस्ट करने के लिए GUI प्रदान करता है. स्थिति.js का उपयोग React.js या Vue.js के साथ संयोजन में किया जा सकता है.

बेज़ेट टूलटिप - यह पुस्तकालय प्रदान करता है टूलटिप प्रदर्शित करने के लिए 14 विकल्प; जैसे कि पर सही, बाएं, तल, बाएं केंद्र, सही अंत, निचला मध्यम, आदि उस के शीर्ष पर, यह भी काफी स्मार्ट है कि यह कर सकता है उपलब्ध स्थान के आधार पर टूलटिप स्थिति को समायोजित करें टूलटिप के आसपास। डेमो देखें.

MouseTip - यह JavaScrtipt लाइब्रेरी एक बनाएगी टूलटिप जो कर्सर स्थिति के साथ आगे बढ़ेगा. टूलटिप एक गैर-मानक के साथ कॉन्फ़िगर किया गया है mousetip- HTML5 का उपयोग करने के बजाय विशेषता डेटा- विशेषता। मूसिप एक एनपीएम मॉड्यूल के रूप में उपलब्ध है.

Internetips - इस पुस्तकालय द्वारा निर्मित टूलटिप के समान मूसटिप के समान है कर्सर स्थिति का अनुसरण करता है. सब कुछ HTML और के बजाय जावास्क्रिप्ट ऑब्जेक्ट के माध्यम से कॉन्फ़िगर किया गया है आधुनिक ब्राउज़र के लिए विशेषताएँ भी बनाई गई हैं. यह हल्का और तेज है.

MTip - टूलटिप के साथ एक जावास्क्रिप्ट लाइब्रेरी महान ब्राउज़र संगतता. यह IE8 के साथ संगत है, पूरी तरह से विकल्पों के माध्यम से अनुकूलन योग्य है, और आप टूलटिप को किसी भी तत्व पर जोड़ सकते हैं img (एक छवि तत्व).

Bubblesee - एक हल्की जावास्क्रिप्ट लाइब्रेरी जो एक की सीधी कार्यक्षमता प्रदान करती है “टूलटिप”. आउटपुट को अनुकूलित करने के लिए जटिल विकल्पों के बिना जावास्क्रिप्ट लाइब्रेरी का उपयोग करना आसान है। यदि आप टूलटिप उपस्थिति बदलना चाहते हैं तो एक Sass फ़ाइल प्रदान की जाती है। डेमो देखें.

Tipfy - आधुनिक जावास्क्रिप्ट सिंटैक्स के साथ बनाया गया, ES6, टिप्फी का आकार केवल 2 KB है. पुस्तकालय फ़ाइलों के दो संस्करण प्रदान करता है: tipfy.min.js स्क्रिप्ट प्रदान करना आधुनिक ईएस 6 वाक्यविन्यास, तथा tipfy.es5.min.js यदि आपको पुराने ब्राउज़रों के साथ संगतता की आवश्यकता है। यह उपयोगकर्ता है डेटा- टूलटिप को अनुकूलित करने की विशेषता; डेटा-tipfy साइड, उदाहरण के लिए, टूलटिप दिशा सेट करने के लिए उपयोग किया जाता है, और उपयोग करें डेटा-tipfy-पाठ टूलटिप सामग्री जोड़ने की विशेषता.

jQuery

Tooltipster - यह लाइब्रेरी लगभग कुछ भी अनुकूलित करने के लिए व्यापक विकल्प प्रदान करती है जैसे कि थीम, एनीमेशन, टच-सपोर्ट, कंटेंट, ओपन-एंड-क्लोज़ ट्रिगर, आदि यह कस्टम इवेंट श्रोता और कॉलबैक प्रदान करता है जो डेवलपर्स को कस्टम फ़ंक्शन के साथ टूलटिप का विस्तार करने की अनुमति देता है। इसके अलावा, एक jQuery प्लगइन होने के नाते, टूलटिप पुराने ब्राउज़र में IE6 जैसे jQuery के संस्करण के आधार पर काम करेगा उपयोग किया जा रहा है.

प्रो टिप - एक और व्यापक jQuery प्लगइन, Protip 49 पदों का समर्थन करता है, टूलटिप सामग्री, आइकन समर्थन, कस्टम कॉलबैक के लिए HTML, और भी काफी। Protip एक GUI प्रदान करता है जिससे आप टूलटिप को आसानी से अनुकूलित कर सकते हैं.

POWERTIP - यह jQuery प्लगइन डेवलपर्स और टूलटिप्स को लागू करने के लिए कई अलग-अलग तरीके प्रदान करने वाले विकल्प भी लाता है। यह समर्थन करता है कीबोर्ड नेविगेशन; पॉपअप बनाते समय तत्वों के साथ नेविगेट करते हुए दिखाई देते हैं टैब कुंजीपटल। पॉवरपिप है एनपीएम मॉड्यूल के रूप में उपलब्ध है. यह आवश्यकताएँ और ब्राउज़र के साथ इस्तेमाल किया जा सकता है.

सुलभ अरिया टूलटिप - एक्सेसिबिलिटी फीचर के साथ एक jQuery प्लगइन बिल्ट-इन, टूलटिप है एक शीर्षक के साथ एक संवाद बॉक्स, पाठ का बहुस्तरीय, और एक करीब बटन प्रदर्शित करने के लिए डिज़ाइन किया गया. यह हमारी सूची में से एक है.

TipsJS - एक साधारण jQuery प्लगइन, फिर भी यह काफी विशिष्ट विशेषताएं लाता है। टूलटिप सामग्री एक के साथ सेट है डेटा-टूलटिप गुण. यह अधिक है कि हम सामग्री को विशेष वर्णों के साथ मार्कडाउन स्वरूपण के समान सामग्री को प्रारूपित करने के लिए भी लपेट सकते हैं। हम प्रयोग कर सकते हैं * सामग्री को बोल्ड बनाने के लिए, ~ इटैलिक के लिए, और ^ शीर्षक के लिए.

डार्क टूलटिप - यह लाइब्रेरी टूलटिप को शक्ति प्रदान करने के लिए कुछ वास्तव में उपयोगी सुविधाएँ प्रदान करती है। उदाहरण के लिए, हम एक जोड़ सकते हैं पुष्टि बटन - हां और नहीं, टूलटिप प्रदर्शित होने के दौरान पृष्ठभूमि को मंद करें, और HTML तत्व जोड़ें सामग्री के लिए। मुझे लगता है कि आपको वास्तव में डेमो पेज देखना चाहिए.

आरिया टूलटिप - बिल्ट-इन एक्सेसिबिलिटी फीचर के साथ एक और टूलटिप, यह jQuery प्लगइन WAI-ARIA 1.1 अनुपालन है। यह एक तरह से उत्तरदायी है जो आप कर सकते हैं विभिन्न व्यूपोर्ट आकारों के लिए अलग-अलग कॉन्फ़िगरेशन प्रदान करें. Aria Tooltip नाम के NPM मॉड्यूल के रूप में उपलब्ध है टी aria-टूलटिप.

Toolbar.js - जबकि अन्य jQuery प्लगइन केवल एक टूलटिप के भीतर सरल पाठ या HTML सामग्री दिखा सकता है, यह jQuery प्लगइन एक टूलबार बनाता है. टूलटिप में एक आइकन के साथ दो या अधिक लिंक होंगे जो आमतौर पर एक कार्रवाई करेंगे क्लिक, किसी भी टूलबार की तरह। प्रलेखन और उदाहरण देखें.

VueJS

वि टूलटिप - V-Tooltip एक Vue.js घटक है जो हुड के नीचे Popper.js द्वारा संचालित है। यह एक प्रदान करता है नाम का नया निर्देश v-टूलटिप जिसे टूलटिप बनाने के लिए किसी भी तत्व में जोड़ा जा सकता है. v-टूलटिप टूलटिप सामग्री या विकल्प हो सकते हैं। रिवाज के अलावा v-टूलटिप निर्देश, आप टूलटिप को टूल के साथ भी जोड़ सकते हैं v-पॉपओवर घटक। इस घटक के साथ, आप कर सकते हैं टूलटिप में अधिक जटिल सामग्री जोड़ें Vue.js घटक या HTML के साथ.

Vue-Bulma टूलटिप - Bulma UI फ्रेमवर्क पर आधारित टूलटिप बनाने के लिए Vue.js घटक। यह पुस्तकालय Vue Bulma के घटक का हिस्सा है। लेकिन वो टूलटिप घटक एक एनपीएम मॉड्यूल के रूप में उपलब्ध है जिसका नाम है Vue-Bulma-टूलटिप कि आप इसे स्टैंडअलोन घटकों के रूप में उपयोग कर सकते हैं.

Vue-निर्देशक-टूलटिप - कुल मिलाकर यह वी। टूलटिप घटक के समान है, जो पोपर.जेएस पर आधारित है और इसी निर्देश को कहा जाता है v-टूलटिप. हालाँकि, यह प्रदान करने के लिए प्रतीत नहीं होता है v-पॉपओवर अंग.

Vue-गा - यह लाइब्रेरी Tippy.js को Vue.js घटक में लपेटती है। यह एक कस्टम Vue.js निर्देश कहा जाता है सुविधाएँ v-अस्थिर जो HTML विशेषता की तरह काम करता है; हम टूलटिप या इसे अनुकूलित करने के विकल्पों के लिए सामग्री जोड़ सकते हैं। यह भी एक प्रदान करता है कस्टम Vue.js घटक टूलटिप सामग्री का उपयोग करके एचटीएमएल विकल्प.

VueJS-पॉपओवर - एक कस्टम Vue.js जिसे कस्टम निर्देश कहा जाता है v-पॉपओवर और दो कस्टम घटकों अर्थात् तथा डेवलपर्स के लिए Vue.js एप्लिकेशन में टूलटिप्स जोड़ने के लिए लचीलापन प्रदान करना.

Vue-सुझाव - एक Vue.js प्लगइन जो Hint.css को लपेटता है। प्लगइन सुविधाएँ v-संकेत-सीएसएस टूलटिप जोड़ने का निर्देश। यह Hint.css के रूप में विकल्पों का एक ही सेट लाता है, इसलिए आप उन्हें जावास्क्रिप्ट ऑब्जेक्ट या Vue.js संशोधक के रूप में जोड़ सकते हैं.

ReactJS

रिएक्ट जॉयराईड - टूलटिप्स के एक सेट को प्रदर्शित करने के लिए एक रिएक्ट घटक जो कि करेगा अपने नए एप्लिकेशन से परिचित होने के लिए नए उपयोगकर्ताओं का मार्गदर्शन करें.

रिएक्ट फ्लोटर - यह लाइब्रेरी फ्लोटर नामक एक रिएक्ट घटक में पॉपर.जेएस को लपेटती है, इसलिए इसमें फ्लोटर की तरह ही शानदार विशेषताएं हैं। आप टूलटिप और पॉपअप जोड़ सकते हैं, और आप भी कर सकते हैं इस घटक के साथ खेलें इस सैंडबॉक्स के माध्यम से.

रिएक्ट ऑटोटिप - ऑटो-पोजिशनिंग फीचर के साथ एक सिंपल रिएक्ट कंपोनेंट, eact Autotip होगा स्वचालित रूप से टूलटिप की स्थिति को समायोजित करें जब इसके आसपास उपलब्ध स्थान बदलता है.

प्रतिक्रिया टिप्पी - Tippy.js और Popover.js के शीर्ष पर निर्मित है। यह पुस्तकालय एक परिचय देता है टूलटिप घटक है कि आप अपने प्रतिक्रिया आवेदन में शामिल कर सकते हैं.

प्रतिक्रिया संकेत - एक प्रतिक्रिया घटक Hint.css का विस्तार। घटक कुछ विशेषताएँ जोड़ते हैं जो Hint.css में उपलब्ध नहीं हैं जैसे कि ऑटो-पोज़िशन, देरी और एक कॉलबैक फ़ंक्शन.

अधिक

एम्बर टूलटिप्स - टूलटिप्स बनाने के लिए एक Ember.js घटक, यह Popper.js के ऊपर बनाया गया है। इस घटक को भी एक्सेसिबिलिटी को ध्यान में रखते हुए डिज़ाइन किया गया है और इस मामले पर लगभग 508 लोगों के साथ अनुपालन करने के लिए सुधार कर रहा है.

डी 3 टिप - एक D3.js प्लगइन। D3.js डेटा विज़ुअलाइज़ेशन जैसे चार्ट, मैप्स, डायग्राम्स आदि के लिए जावास्क्रिप्ट लाइब्रेरी है। यह प्लगइन आपको इन डेटा के ऊपर टूलटिप दिखाने की अनुमति देता है.