सीएसएस टूलटिप
CSS के साथ टूलटिप्स बनाएं।
डेमो: टूलटिप उदाहरण
टूलटिप का उपयोग अक्सर किसी चीज़ के बारे में अतिरिक्त जानकारी निर्दिष्ट करने के लिए किया जाता है जब उपयोगकर्ता माउस पॉइंटर को किसी तत्व पर ले जाता है:
मूल टूलटिप
एक टूलटिप बनाएं जो तब प्रकट होता है जब उपयोगकर्ता माउस को किसी तत्व पर ले जाता है:
उदाहरण
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted
black; /* If you want dots under the hoverable text */
}
/* Tooltip text
*/
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show
the tooltip text when you mouse over the tooltip container */
.tooltip:hover
.tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover
over me
<span class="tooltiptext">Tooltip
text</span>
</div>
उदाहरण समझाया गया
HTML: एक कंटेनर एलिमेंट (जैसे <div>) का उपयोग करें और उसमें
"tooltip"क्लास जोड़ें। जब उपयोगकर्ता इस <div> पर माउस ले जाता है, तो यह टूलटिप टेक्स्ट दिखाएगा।
टूलटिप टेक्स्ट को इनलाइन एलिमेंट (जैसे <span>) के अंदर class="tooltiptext".
CSS: क्लास tooltipयूज़ position:relative, जो टूलटिप टेक्स्ट ( position:absolute) को पोजिशन करने के लिए आवश्यक है।
नोट: टूलटिप की स्थिति के बारे में नीचे दिए गए उदाहरण देखें।
कक्षा में tooltiptextवास्तविक टूलटिप टेक्स्ट होता है। यह डिफ़ॉल्ट रूप से छिपा होता है, और होवर पर दिखाई देगा (नीचे देखें)। हमने इसमें कुछ बुनियादी शैलियाँ भी जोड़ी हैं: 120px चौड़ाई, काली पृष्ठभूमि का रंग, सफेद पाठ का रंग, केंद्रित पाठ, और 5px ऊपर और नीचे पैडिंग।
CSS border-radiusगुण का उपयोग टूलटिप टेक्स्ट में गोल कोनों को जोड़ने के लिए किया जाता है।
:hoverजब उपयोगकर्ता माउस को <div> के ऊपर ले जाता है, तो टूलटिप टेक्स्ट दिखाने के लिए चयनकर्ता का उपयोग किया जाता है class="tooltip"।
पोजिशनिंग टूलटिप्स
इस उदाहरण में, टूलटिप को left:105%"होवर करने योग्य" टेक्स्ट (<div>) के दाईं ओर ( ) रखा गया है। यह भी ध्यान दें कि top:-5pxइसका उपयोग इसके कंटेनर तत्व के बीच में रखने के लिए किया जाता है। हम संख्या 5 का उपयोग करते हैं क्योंकि टूलटिप टेक्स्ट में 5px का शीर्ष और निचला पैडिंग है। यदि आप इसकी पैडिंग बढ़ाते हैं, तो topयह सुनिश्चित करने के लिए संपत्ति का मूल्य भी बढ़ाएं कि यह बीच में रहे (यदि यह कुछ ऐसा है जो आप चाहते हैं)। यदि आप टूलटिप को बाईं ओर रखना चाहते हैं तो यही बात लागू होती है।
दायां टूलटिप
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
परिणाम:
बायां टूलटिप
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
परिणाम:
यदि आप चाहते हैं कि टूलटिप ऊपर या नीचे दिखाई दे, तो नीचे दिए गए उदाहरण देखें। ध्यान दें कि हम margin-leftसंपत्ति का उपयोग शून्य से 60 पिक्सेल के मान के साथ करते हैं। यह टूलटिप को होवर करने योग्य टेक्स्ट के ऊपर/नीचे केंद्रित करने के लिए है। यह टूलटिप की चौड़ाई के आधे (120/2 = 60) पर सेट है।
शीर्ष टूलटिप
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
परिणाम:
निचला टूलटिप
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
परिणाम:
टूलटिप तीर
एक तीर बनाने के लिए जो टूलटिप के एक विशिष्ट पक्ष से दिखाई देना चाहिए, टूलटिप के बाद "खाली" सामग्री को संपत्ति ::afterके साथ छद्म-तत्व वर्ग के साथ जोड़ें content
। तीर स्वयं सीमाओं का उपयोग करके बनाया गया है। यह टूलटिप को स्पीच बबल जैसा बना देगा।
यह उदाहरण दर्शाता है कि टूलटिप के नीचे तीर कैसे जोड़ा जाए:
निचला तीर
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
/* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
परिणाम:
उदाहरण समझाया गया
तीर को टूलटिप के अंदर top: 100%रखें: तीर को टूलटिप के नीचे रखेगा। left: 50%तीर केन्द्रित करेगा।
नोट: संपत्ति border-widthतीर के आकार को निर्दिष्ट करती है। यदि आप इसे बदलते हैं, तो margin-leftमान को भी उसी में बदलें। यह तीर को केंद्रित रखेगा।
border-colorसामग्री को तीर में बदलने के लिए उपयोग किया जाता है । हम शीर्ष सीमा को काले रंग में सेट करते हैं, और बाकी को पारदर्शी पर सेट करते हैं। यदि सभी पक्ष काले थे, तो आपके पास एक काला वर्गाकार बॉक्स होगा।
यह उदाहरण दर्शाता है कि टूलटिप के शीर्ष पर एक तीर कैसे जोड़ा जाए। ध्यान दें कि हमने इस बार बॉटम बॉर्डर कलर सेट किया है:
शीर्ष तीर
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
परिणाम:
यह उदाहरण दर्शाता है कि टूलटिप के बाईं ओर एक तीर कैसे जोड़ा जाए:
बायीं तरफ
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip
*/
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
परिणाम:
यह उदाहरण दर्शाता है कि टूलटिप के दाईं ओर एक तीर कैसे जोड़ा जाए:
दायां तीर
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the
tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
परिणाम:
टूलटिप्स में फ़ेड (एनिमेशन)
यदि आप टूलटिप टेक्स्ट के दिखाई देने के समय में फीका पड़ना चाहते हैं, तो आप transitionप्रॉपर्टी के साथ CSS प्रॉपर्टी का उपयोग कर सकते opacity
हैं, और पूरी तरह से अदृश्य होने से 100% दृश्यमान होने के लिए, कई निर्दिष्ट सेकंड में (हमारे में 1 सेकंड में) जा सकते हैं। उदाहरण):
उदाहरण
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
}