CSS Tooltip: होवर पर अतिरिक्त जानकारी दिखाने का गाइड

CSS Tooltips क्या हैं?

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

टूलटिप बनाने के लिए कोई डिफ़ॉल्ट HTML एलिमेंट नहीं है। इसलिए, हमें एक ऐसे एलिमेंट को डिज़ाइन करने के लिए HTML और CSS के संयोजन पर भरोसा करना होगा जो टूलटिप की तरह दिखाई दे।

बेसिक टूलटिप बनाना

आइए अपने टूलटिप के लिए HTML कोड लिखकर शुरू करें। इस उदाहरण में, हम एक रेसिपी वेबसाइट के लिए टूलटिप बनाने जा रहे हैं। जब यूज़र prepare the baking tray शब्द पर होवर करता है, तो एक टूलटिप दिखाई देनी चाहिए जिसमें बेकिंग ट्रे तैयार करने की याद दिलाने के लिए कुछ टेक्स्ट हो।

HTML कोड

<html>
  <div style="text-align:center;">
    <p>Instructions for baking:</p>
    <div class="tooltip">
      Prepare the baking tray. 
      <span class="contents">Line tray with greaseproof paper.</span>
    </div>
  </div>
</html>

सबसे पहले, हमारे कोड में, हमने एक <div> टैग बनाया जिसमें एक style एट्रिब्यूट सेट है। हमारे द्वारा परिभाषित स्टाइल हमारे <div> टैग में टेक्स्ट को एलिमेंट के केंद्र में संरेखित करता है (text-align: center)। फिर, हम Instructions for baking: टेक्स्ट वाला एक पैराग्राफ बनाने के लिए <p> टैग का उपयोग करते हैं।

इसके बाद, हमने एक डिवाइडर बनाया जिसमें हमारा टूलटिप दिखाई देगा। यह Prepare the baking tray टेक्स्ट दिखाएगा। हमारे <div> टैग के अंदर एक <span> टैग है जिसमें वह टेक्स्ट है जिसे हम यूज़र द्वारा Prepare the baking tray शब्द पर होवर करने पर दिखाना चाहते हैं।

अभी, हमारा कोड स्क्रीन पर सभी टेक्स्ट दिखाता है। ऐसा इसलिए है क्योंकि हमने अभी तक टूलटिप बनाने के लिए अपने कोड पर कोई स्टाइल लागू नहीं किया है। यहां वे स्टाइल्स हैं जिनका उपयोग हम अपना CSS टूलटिप बनाने के लिए करने जा रहे हैं:

CSS कोड

<style>
  .tooltip {
    display: inline-block;
    position: relative;
    margin: 50px;
  }
  
  .tooltip .contents {
    visibility: hidden;
    width: 120px;
    background-color: lightblue;
    color: white;
    text-align: center;
    padding: 10px 0;
    border-radius: 5px;
    position: absolute;
    z-index: 1;
  }
  
  .tooltip:hover .contents {
    visibility: visible;
  }
</style>

कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।

हमारे कोड में, हमने एक टूलटिप बनाया जो तब ट्रिगर होता है जब यूज़र Prepare the baking tray टेक्स्ट पर होवर करता है। इस टूलटिप में हमारी वेबसाइट के पाठक के लिए बेकिंग ट्रे तैयार करने का संक्षिप्त रिमाइंडर है।

CSS कोड का ब्रेकडाउन

.tooltip स्टाइल

सबसे पहले, हमने .tooltip नामक एक स्टाइल रूल बनाया, जो हमारे HTML कोड में <div> टैग पर लागू होता है। यह स्टाइल एलिमेंट को एक इनलाइन-लेवल ब्लॉक कंटेनर के रूप में परिभाषित करता है, जिसका अर्थ है कि यह एक नई लाइन पर शुरू होता है।

हमने टूलटिप की स्थिति को relative पर भी सेट किया, जिसका अर्थ है कि टूलटिप उसी स्थान पर रहेगा भले ही पेज स्क्रॉल किया जाए। आप CSS पोजिशनिंग के बारे में हमारे CSS पोजिशन गाइड में अधिक जान सकते हैं।

अंत में, हमने अपने टूलटिप टेक्स्ट के चारों ओर 50px मार्जिन निर्दिष्ट किया, जो हमें अपने टूलटिप टेक्स्ट और वेब पेज पर अन्य एलिमेंट्स के बीच स्पेस बनाने की अनुमति देता है। आप मार्जिन्स के बारे में हमारे CSS मार्जिन के बिगिनर्स गाइड में अधिक जान सकते हैं।

.tooltip .contents स्टाइल

इसके बाद, हमने .tooltip .contents नामक एक स्टाइल रूल परिभाषित किया, जो किसी भी एलिमेंट पर लागू होता है जिसका क्लास नाम contents है और जिसका पैरेंट क्लास का नाम tooltip है।

इस उदाहरण के लिए, इसका मतलब है कि यह स्टाइल रूल हमारे <span> टैग पर लागू होता है। इस नियम में हमारे वास्तविक टूलटिप एट्रिब्यूट के लिए स्टाइल्स हैं।

हमारे .contents स्टाइल में, हम visibility प्रॉपर्टी का मान hidden पर सेट करते हैं। इसका मतलब है कि, जब तक अन्यथा न कहा जाए, टूलटिप यूज़र से छिपा हुआ है।

फिर हम टूलटिप की चौड़ाई (width) को 120px, टूलटिप के बैकग्राउंड कलर (background-color) को हल्का नीला, और टूलटिप में टेक्स्ट के रंग (color) को सफेद सेट करते हैं। इसके अलावा, हम text-align का उपयोग करके टूलटिप में टेक्स्ट को एलिमेंट के केंद्र में संरेखित करते हैं।

हमारे .contents नियम के अंत में, हम 10px पैडिंग सेट करते हैं, जो हमारे टूलटिप में टेक्स्ट और उसके बॉर्डर्स के बीच स्पेस बनाता है। हम 15px का border-radius भी सेट करते हैं, जो हमारे टूलटिप को राउंडेड कॉर्नर इफेक्ट देता है।

इसके बाद, हम .contents एलिमेंट के पोजिशन वैल्यू को absolute पर सेट करते हैं, जिसका अर्थ है कि .contents एलिमेंट पैरेंट एलिमेंट के सापेक्ष स्थित है। इस मामले में, हमारे HTML कोड में पैरेंट एलिमेंट हमारा <div> टैग है, जिसका अर्थ है कि हमारा टूलटिप हमारे कोड में हमारे <div> टैग के बगल में हमेशा दिखाई देगा।

.tooltip:hover .contents स्टाइल

अंत में, हमने .tooltip:hover .contents नामक एक नियम परिभाषित किया। यह नियम तब टूलटिप टेक्स्ट दिखाने के लिए उपयोग किया जाता है जब यूज़र क्लास नाम tooltip वाले एलिमेंट पर अपना माउस होवर करता है।

जब यह नियम निष्पादित होता है, तो .contents एलिमेंट की विजिबिलिटी visible पर सेट हो जाती है। इसका मतलब है कि जब यूज़र टूलटिप पर होवर करता है, तो टूलटिप वेब पेज पर विज़िबल हो जाता है।

CSS टूलटिप की स्थिति निर्धारित करना

हमारे ऊपर के उदाहरण में, जब यूज़र लेबल Prepare the baking tray पर होवर करता है तो हमारा टूलटिप हमारे टेक्स्ट के दाईं ओर दिखाई देता है। हालांकि, हम इसे कस्टमाइज़ कर सकते हैं ताकि हमारा टूलटिप हमारे टेक्स्ट के अलग-अलग एजेज पर दिखाई दे।

राइट पोजिशन (दाईं ओर)

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

.tooltip .contents { top: -5px; left: 105%; }

यह CSS नियम, जब हमारे पहले के कोड के साथ संयोजित किया जाता है, टूलटिप को हमारे टेक्स्ट के दाईं ओर स्थित करता है। top: -5px नियम टूलटिप को उसके कंटेनर एलिमेंट के केंद्र के साथ संरेखित करता है। left: 105% नियम टूलटिप को कंटेनर के दाईं ओर रखता है क्योंकि यह टूलटिप की स्थिति को टूलटिप की चौड़ाई के 105% से लेफ्ट में ऑफसेट करता है।

लेफ्ट पोजिशन (बाईं ओर)

मान लीजिए हम चाहते हैं कि हमारा टूलटिप हमारे टेक्स्ट के बाईं ओर दिखाई दे। हम निम्न कोड का उपयोग करके ऐसा कर सकते हैं:

.tooltip .contents { top: -5px; right: 105%; }

यह कोड, जब हमारे पहले के कोड में जोड़ा जाता है, हमारे टूलटिप को हमारे टेक्स्ट के बाईं ओर स्थित करता है। top: -5px नियम टूलटिप को उसके कंटेनर के केंद्र के साथ संरेखित करता है, जैसा कि हमने पिछले उदाहरण में चर्चा की थी। right: 105% नियम हमें अपने टूलटिप को कंटेनर के बाईं ओर रखने की अनुमति देता है (या, बल्कि, टूलटिप की स्थिति को टूलटिप की चौड़ाई के 105% से राइट में ऑफसेट करता है)।

टॉप पोजिशन (ऊपर)

मान लीजिए हम चाहते हैं कि हमारा टूलटिप हमारे टेक्स्ट के ऊपर दिखाई दे। हम निम्न कोड का उपयोग करके इस कार्य को पूरा कर सकते हैं:

.tooltip .contents { bottom: 100%; left: 50%; margin-left: -60px; }

इस उदाहरण में, हमने अपने टूलटिप को हमारे टेक्स्ट के ऊपर स्थित करने के लिए तीन CSS स्टाइल्स का उपयोग किया। bottom: 100% और left: 50% स्टाइल्स हमें अपने टूलटिप को टूलटिप लेबल (Prepare the baking tray) की चौड़ाई के 100% से क्रमशः बॉटम और लेफ्ट से ऑफसेट करने की अनुमति देते हैं।

margin-left स्टाइल हमें अपने टूलटिप को केंद्रित करने की अनुमति देता है। चूंकि हमारे टूलटिप की चौड़ाई 120px है, हमने margin-left का मान -60px (120px का आधा) निर्दिष्ट किया है। यह सुनिश्चित करता है कि हमारा टूलटिप हमारे टूलटिप लेबल के ऊपर केंद्रित दिखाई दे।

बॉटम पोजिशन (नीचे)

मान लीजिए हम चाहते हैं कि हमारा टूलटिप Prepare the baking tray लेबल के नीचे दिखाई दे। हम निम्न कोड का उपयोग करके ऐसा कर सकते हैं:

.tooltip .contents { top: 100%; left: 50%; margin-left: -60px; }

हमारा कोड हमारे Top Position उदाहरण में उपयोग की गई समान स्टाइल्स का उपयोग करता है, एक अपवाद के साथ। इस उदाहरण में, हम top: 100% स्टाइल का उपयोग करते हैं (पिछले उदाहरण में उपयोग किए गए bottom: 100% के बजाय)। यह स्टाइल हमें अपने टूलटिप बॉक्स को टूलटिप लेबल (Prepare the baking tray) की चौड़ाई के 100% से ऑफसेट करने की अनुमति देता है, जिससे हम अपने टूलटिप बॉक्स को लेबल के नीचे स्थित कर सकते हैं।

फेड-इन टूलटिप्स (Fade-in Tooltips)

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

फेड-इन इफेक्ट के लिए स्टाइल

.tooltip .contents { 
  opacity: 0; 
  transition: opacity 2s; 
}
.tooltip:hover .contents { 
  opacity: 1; 
}

यह स्टाइल, जब हमारे पहले उदाहरण के कोड के साथ संयोजित किया जाता है, आपको फेड-इन इफेक्ट प्राप्त करने की अनुमति देता है। आइए देखें कि यह कैसे काम करता है। सबसे पहले, हम अपने टूलटिप की ओपेसिटी को 0 पर निर्दिष्ट करते हैं। इसका मतलब है कि टूलटिप छिपा हुआ है।

फिर हम दो वैल्यूज़ के साथ transition प्रॉपर्टी निर्दिष्ट करते हैं: opacity और 2s। opacity उस CSS प्रॉपर्टी को संदर्भित करता है जिसे हम अपने ट्रांज़िशन में लागू करना चाहते हैं, और 2s हमारे ट्रांज़िशन की अवधि को संदर्भित करता है (सेकंड में)।

इसके बाद, हम .tooltip:hover .contents नियम बनाते हैं जो यूज़र द्वारा टूलटिप पर होवर करने पर हमारे टूलटिप की ओपेसिटी को 1 पर सेट करता है।

यह हमें एक इफेक्ट प्राप्त करने की अनुमति देता है जहां, जब यूज़र टूलटिप पर होवर करता है, तो एलिमेंट पूरी तरह से ओपेक (अदृश्य) से पूरी तरह से विज़िबल में ट्रांज़िशन करेगा। चूंकि हमने अपनी ट्रांज़िशन अवधि 2s निर्दिष्ट की है, यह ट्रांज़िशन पूरा होने में दो सेकंड लेगा।

यदि आप CSS ट्रांज़िशन्स के बारे में अधिक जानने में रुचि रखते हैं, तो CSS ट्रांज़िशन प्रॉपर्टी के लिए हमारे गाइड को पढ़ें।

निष्कर्ष

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

इस ट्यूटोरियल ने उदाहरणों के संदर्भ में पता लगाया कि CSS में टूलटिप कैसे बनाया जाए, और अपने टूलटिप को लेबल के लेफ्ट, राइट, बॉटम और टॉप पर कैसे स्थित किया जाए। हमने यह भी चर्चा की कि फेड-इन इफेक्ट कैसे बनाया जाए जो तब ट्रिगर होता है जब यूज़र टूलटिप लेबल पर होवर करता है।

अब आपके पास एक प्रोफेशनल वेब डिज़ाइनर की तरह अपने खुद के CSS टूलटिप्स डिज़ाइन करना शुरू करने के लिए ज्ञान है!