HTML में टूलटिप कैसे जोड़ें

टूलटिप पाठ का एक टुकड़ा है जो तब दिखाई देता है जब आप अपने माउस को किसी प्रोग्राम में किसी चीज़ पर ले जाते हैं। जैसा कि नाम से पता चलता है, उनका उपयोग मूल रूप से यह बताने के लिए किया जाता था कि कार्यक्रमों में विभिन्न टूल आइकन का प्रतिनिधित्व क्या है, लेकिन उनका उपयोग अन्य उद्देश्यों के लिए भी किया जा सकता है। HTML में टूलटिप बनाने के कुछ तरीके हैं, वेब प्रोग्रामिंग भाषा, जिसमें HTML बनाने के लिए JavaScript या CSS का उपयोग करना और HTML छवि पर "शीर्षक" विशेषता का उपयोग करना शामिल है।

छवि शीर्षक विशेषता

लगभग सभी आधुनिक वेबसाइटों में छवियां होती हैं, और वे आमतौर पर "img" टैग का उपयोग करके पृष्ठ में डाली जाती हैं। "Img" टैग के भीतर, एक "src" विशेषता छवि के वेब स्थान या URL को निर्दिष्ट करती है। अतिरिक्त विशेषताएँ छवि की चौड़ाई और ऊँचाई को निर्दिष्ट कर सकती हैं, और यदि छवि नहीं दिखाई जा सकती है तो "alt" पाठ प्रदर्शित किया जाएगा। एक "शीर्षक" विशेषता पाठ को निर्दिष्ट कर सकती है जो छवि पर माउस ले जाने पर टूलटिप के रूप में दिखाई देगा। एक आइकन या किसी अन्य ऑनलाइन छवि पर टूलटिप लगाने के लिए इसका उपयोग करें।

उदाहरण के लिए, आपके पास एक "img" टैग हो सकता है जो दिखता है

यदि चित्र किसी कारण से प्रदर्शित नहीं किया जा सकता है, जैसे कि ब्राउज़र जहाँ इसे संग्रहीत किया गया है, वहाँ से लोड करने में असमर्थ है, तो Alt पाठ प्रदर्शित होता है। यदि कोई "शीर्षक" विशेषता मौजूद नहीं है, तो कुछ पुराने ब्राउज़र इसे टूलटिप के रूप में भी प्रदर्शित करेंगे। यह स्क्रीन पाठकों द्वारा भी उपयोग किया जाता है जो दृश्य विकलांग लोगों को वेब पर नेविगेट करने में मदद करता है, इसलिए जब भी संभव हो तो ऑल्ट टेक्स्ट को शामिल करना एक अच्छा विचार है।

ध्यान दें कि स्मार्ट फोन पर उपयोगकर्ता शीर्षक विशेषता को देखने में सक्षम नहीं हो सकते हैं, इसलिए आप एक अन्य टूलटिप विधि का उपयोग करना चाह सकते हैं जो कि टचटिप्स दिखाता है यदि यह एक चिंता का विषय है।

जावास्क्रिप्ट टूलटिप विकल्प

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

कस्टम टूलटिप्स लागू करने के लिए आप अपना स्वयं का जावास्क्रिप्ट कोड भी लिख सकते हैं। आप संभवतः माउस माउस इवेंट्स का उपयोग करना चाहेंगे, जैसे कि माउसओवर जब आप किसी चीज़ पर माउस को घुमाते हैं और माउस टूल इवेंट को तब निकालते हैं जब आप अपने टूलटिप्स को दिखाने और छिपाने के लिए उसे किसी ऑब्जेक्ट से हटाते हैं। क्रॉस-ब्राउजर डेवलपमेंट लाइब्रेरी जैसे कि jQuery का उपयोग करना चीजों को आसान बना सकता है।

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

सीएसएस टूलटिप संभावनाएँ

कुछ अनुप्रयोगों के लिए टूलटिप्स बनाना भी संभव है, जिन्हें किसी "शीर्षक" विशेषता के बिना HTML सुविधाओं के लिए भी किसी जावास्क्रिप्ट कोड की आवश्यकता नहीं होती है।

आप कैस्केडिंग स्टाइल शीट का उपयोग कर सकते हैं, HTML स्टाइल करने के लिए उपयोग की जाने वाली भाषा, टूलटिप्स बनाने के लिए जो किसी वेब पेज पर किसी विशेष तत्व से मेल खाती है। ऐसा करने के लिए, सीएसएस का उपयोग करें : हॉवर " स्यूडोसलेक्टर जो उस तत्व पर माउस को तैनात या हॉवर किए जाने पर विशेष शैली के नियमों को लागू करने में सक्षम बनाता है। जब टूलटिप मौजूद नहीं होना चाहिए और "प्रदर्शन: ब्लॉक" होना चाहिए, तो आप "प्रदर्शन: कोई नहीं" स्टाइल नियम का उपयोग करना चाहते हैं, जब इसे प्रदर्शित होने और उपयुक्त रूप में गायब होने के लिए मौजूद होना चाहिए।

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