इस अल्ट्रा-क्विक ट्यूटोरियल में, आप सीखेंगे कि जब आपके यूजर्स किसी एलिमेंट पर होवर करते हैं, जैसे इमेज या लिंक, तो एक संक्षिप्त विवरण टेक्स्ट (टूलटिप की तरह) कैसे प्रदर्शित करें।
टूलटिप जोड़ने में कुछ सेकंड लगते हैं। आप बस HTML title एट्रिब्यूट का उपयोग करते हैं: title।
होवर पर टेक्स्ट प्रदर्शित करें (माउस एलिमेंट पर)
रुबिक क्यूब की एक इमेज का बेसिक उदाहरण यहाँ है। इस इमेज पर अपना माउस ले जाएं और कुछ सेकंड के भीतर रुबिक क्यूब के बारे में अतिरिक्त जानकारी पॉप अप हो जाएगी:
उपरोक्त इमेज एलिमेंट के लिए HTML मार्कअप यहाँ है:
<img src="url-to-image-file" title="रुबिक क्यूब। 1974 में हंगेरियन मूर्तिकार एर्नो रुबिक द्वारा आविष्कृत एक 3-D संयोजन पहेली खिलौना।" alt="एक रुबिक क्यूब" />मान लें कि आप एक टूलटिप दिखाना चाहते हैं जब आपके यूजर्स अपना माउस लिंक/एंकर एलिमेंट पर ले जाते हैं।
इस लिंक पर अपना माउस ले जाकर टूलटिप प्रकट करें
नवीनतम लेख
और HTML मार्कअप:
<a href="https://techstacker.com" title="TechStacker के फ्रंट पेज का लिंक">नवीनतम लेख</a>बस इतना ही है। आप किसी भी HTML एलिमेंट पर title एट्रिब्यूट जोड़ सकते हैं।
क्यों होवर पर टेक्स्ट दिखाना आपके यूजर्स के लिए फायदेमंद है?
मान लें आपके पास एक एलिमेंट है जो अपनी सादगी के कारण कुछ लोगों के लिए भ्रम पैदा कर सकता है। एक उदाहरण आइकन हो सकता है। अधिकांश लोग मुट्ठी भर से अधिक आइकन नहीं पहचान सकते, लेकिन अकेले पश्चिमी दुनिया में हजारों अलग-अलग आइकन प्रदर्शन पर हैं।
बस एक आइकन पर title एट्रिब्यूट जोड़कर (उदाहरण के लिए एक इमेज एलिमेंट के अंदर) लोगों के पास उस आइकन के कार्य का स्पष्ट विवरण प्राप्त करने का विकल्प होता है जहां भी वह आपके UI में मौजूद होता है।
अब आप सोच सकते हैं, कितने लोग जानते हैं कि किसी एलिमेंट पर होवर करने से कभी-कभी अतिरिक्त जानकारी प्रकट होती है?
यह एक बेहतरीन सवाल है। उत्तर यह है कि यह आपके लक्षित दर्शकों पर निर्भर करता है। अधिकांश टेक-सेवी लोग सहज रूप से जानते हैं कि होवर करना + 1-2 सेकंड प्रतीक्षा करना अक्सर विषय के बारे में अतिरिक्त जानकारी प्रकट करेगा।
लेकिन क्या होगा यदि आपके दर्शकों में मुख्य रूप से गैर-तकनीकी लोग शामिल हैं, या शायद सिर्फ वे लोग जो वेब पर बहुत अधिक ब्राउज़ नहीं करते?
खैर, तब मेरा डिफ़ॉल्ट एक्शन ल्यूक व्रोब्लेव्स्की की सार्वभौमिक सलाह लागू करना है:
स्पष्ट हमेशा जीतता है।
यदि कोई आइकन स्पष्ट नहीं है, या कम से कम उच्च प्रतिशत लोगों के लिए स्पष्ट नहीं है, तो आप या तो एक बेहतर आइकन बनाएं या उस आइकन को एक संक्षिप्त विवरण के साथ जोड़ दें।
किसी भी मामले में, title एट्रिब्यूट जोड़ना, और बेशक, ALT एट्रिब्यूट (स्क्रीन रीडर्स के लिए, दृष्टिबाधितों के लिए) के केवल फायदे हैं। आपको इसे हर चीज़ पर जोड़ने की आवश्यकता नहीं है, लेकिन अगर आपको संदेह है, तो आप इसे कर सकते हैं।
एक अतिरिक्त बोनस के रूप में, कम से कम ALT एट्रिब्यूट्स का SEO पर भी प्रभाव पड़ता है, कम से कम अप्रत्यक्ष रूप से, लेकिन शायद सीधे भी।
ऐसा कैसे? खैर, ALT विवरण एक्सेसिबिलिटी श्रेणी में आता है, जिसके बारे में Google ने कोई रहस्य नहीं बनाया है कि इसका प्रभाव इस बात पर पड़ता है कि वे आपकी वेबसाइट की गुणवत्ता का आकलन कैसे करते हैं, जो आपकी SEO रैंकिंग शक्ति को प्रभावित करेगा।
जहां तक title एट्रिब्यूट का सवाल है, यह पहले SEO को प्रभावित करता था, लेकिन मेरे नवीनतम शोध के आधार पर, यह स्पष्ट नहीं है कि यह आज भी करता है। लेकिन फिर से, title एट्रिब्यूट का उपयोग करने का कोई स्पष्ट नुकसान नहीं है, केवल फायदे हैं।
वैकल्पिक टूलटिप विधियाँ
आपको बिल्ट-इन HTML टूलटिप/title एट्रिब्यूट का अधिक कस्टम संस्करण चाहिए हो सकता है। उस स्थिति में, आप विभिन्न उपयोग के मामलों के लिए टूलटिप्स को समय और स्टाइल करने के लिए JavaScript और CSS दोनों का उपयोग कर सकते हैं। मैं उस उपयोगी कौशल को भविष्य के ट्यूटोरियल में कवर करूँगा (यह मेरी टू-राइट सूची में है!)।
