सीएसएस टूलटिप

जब आप कोई वेबसाइट डिज़ाइन कर रहे हों, तो आप यह तय कर सकते हैं कि जब उपयोगकर्ता साइट पर किसी तत्व पर होवर करता है तो आप वेब पेज पर किसी चीज़ के बारे में अतिरिक्त जानकारी दिखाना चाहते हैं।

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

जब उपयोगकर्ता किसी तत्व पर होवर करता है तो किसी चीज़ के बारे में जानकारी दिखाने के लिए, आप टूलटिप बना सकते हैं। इस ट्यूटोरियल में, हम एक उदाहरण के संदर्भ में चर्चा करेंगे कि CSS में टूलटिप कैसे बनाया जाए। इस ट्यूटोरियल को पढ़ने के अंत तक, आप CSS में टूलटिप्स बनाने के विशेषज्ञ होंगे।

सीएसएस टूलटिप्स

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

कोई डिफ़ॉल्ट 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>

सबसे पहले, हमारे कोड में, हमने एक

टैग बनाया है जिसमें एक style . है गुण सेट। हमने जिस शैली को परिभाषित किया है, वह हमारे

टैग में टेक्स्ट को तत्व के केंद्र में संरेखित करती है (पाठ-संरेखण:केंद्र)। फिर, हम

टैग का उपयोग एक पैराग्राफ बनाने के लिए करते हैं जिसमें टेक्स्ट Instructions for baking: होता है। .

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

इसके बाद, हमने एक डिवाइडर बनाया जिसमें हमारा टूलटिप दिखाई देगा। यह टेक्स्ट दिखाएगा prepare the baking tray . हमारे

टैग के अंदर एक टैग होता है जिसमें वह टेक्स्ट होता है जिसे हम तब दिखाना चाहते हैं जब उपयोगकर्ता prepare the baking tray शब्द पर होवर करता है। .

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

<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>

<style>
.tooltip {
	display: inline-block;
	position: relative;
	margin: 50px;
}

.tooltip .tooltiptext {
	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;
}

सीएसएस टूलटिप हमारे एचटीएमएल/सीएसएस कोड का आउटपुट देखने के लिए ऊपर दिए गए कोड संपादक में बटन।

हमारे कोड में, हमने एक टूलटिप बनाई है जो तब चालू हो जाती है जब उपयोगकर्ता टेक्स्ट पर होवर करता है prepare the baking tray . इस टूलटिप में हमारी वेबसाइट के पाठक के लिए बेकिंग ट्रे तैयार करने का एक संक्षिप्त अनुस्मारक है।

आइए देखें कि हमारा सीएसएस कोड कैसे काम करता है, ताकि आप जान सकें कि हमारा डेटा टूलटिप कैसे बनाया गया था।

.टूलटिप स्टाइल

सबसे पहले, हमने .tooltip नामक एक स्टाइल नियम बनाया, जो हमारे HTML कोड में

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

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

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

.टूलटिप .सामग्री शैली

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

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

हमारी सामग्री शैली में, हम visibility . का मान निर्दिष्ट करते हैं hidden . के लिए संपत्ति . इसका मतलब यह है कि, जब तक अन्यथा न कहा जाए, टूलटिप उपयोगकर्ता से छिपा हुआ है।

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

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

इसके बाद, हम .contents तत्व का स्थिति मान absolute . पर सेट करते हैं , जिसका अर्थ है कि सामग्री तत्व मूल तत्व के सापेक्ष स्थित है। इस मामले में, हमारे HTML कोड में मूल तत्व हमारा

टैग है, जिसका अर्थ है कि हमारा टूलटिप हमेशा हमारे कोड में हमारे

टैग के बगल में दिखाई देगा।

.tooltip:hover .contents Style

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

जब इस नियम को क्रियान्वित किया जाता है, तो .contents तत्व की दृश्यता visible . पर सेट हो जाती है . इसका मतलब यह है कि जब उपयोगकर्ता टूलटिप पर होवर करता है, तो टूलटिप वेब पेज पर दिखाई देने लगेगा।

CSS टूलटिप को स्थान दें

हमारे उपरोक्त उदाहरण में, जब उपयोगकर्ता prepare the baking tray लेबल पर होवर करता है, तो हमारा टूलटिप हमारे टेक्स्ट के दाईं ओर दिखाई देता है . हालांकि, हम इसे अनुकूलित कर सकते हैं ताकि हमारा टूलटिप हमारे टेक्स्ट के विभिन्न किनारों पर दिखाई दे।

सही स्थिति

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

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

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

हमारा कोड लौटाता है:

जैसा कि आप देख सकते हैं, हमारा टूलटिप हमारे टेक्स्ट के दाईं ओर दिखाई देता है।

बाएं स्थान

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

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

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

यहाँ हमारा कोड क्या लौटाता है:

हमारा टूलटिप हमारे टेक्स्ट के बाईं ओर दिखाई देता है।

शीर्ष स्थान

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

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

हमारा कोड लौटाता है:

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

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

निचला स्थान

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

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

हमारा कोड लौटाता है:

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

टूलटिप्स में फीका

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

यहाँ एक शैली है जिसका उपयोग आप फ़ेड-इन टूलटिप बनाने के लिए कर सकते हैं:

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

.tooltip:hover .contents {
	opacity: 1;
}

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

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

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

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

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

निष्कर्ष

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

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

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