CSS टूलटिप
- पिछला पृष्ठ CSS एनिमेशन
- अगला पृष्ठ CSS इमेज स्टाइल
CSS के द्वारा टूलटिप (Tooltip) बनाएं。
प्रदर्शन: टूलटिप
इंस्टांस
जब उपयोक्ता माउस पॉइंटर को एक एलिमेंट पर ले जाता है, तो टूलटिप आमतौर पर अतिरिक्त सूचना प्रदान करने के लिए उपयोग किया जाता है:
基础的工具提示
创建一个鼠标移到元素上时显示的工具提示：
इंस्टांस
<style>
/* Tooltip 容器 */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* 如果需要在可悬停文本下面显示点线 */
}
/* Tooltip 文本 */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* 定位工具提示文本 - 请看下面的例子 */
position: absolute;
z-index: 1;
}
/* 将鼠标悬停在工具提示容器上时，显示工具提示文本 */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me</div>
<span class="tooltiptext">Tooltip text</span>
</div>
उदाहरण व्याख्या
HTML：
कंटेनर एलिमेंट (जैसे <div> ) को उपयोग करके और इसके बाद "tooltip" क्लास में है. जब उपयोगकर्ता का माउस इस <div> पर जाता है तो टूलटिप टैक्स्ट दिखाई देता है。
टूलटिप टैक्स्ट इस class="tooltiptext" के अंतर्निहित एलिमेंट (जैसे <span> ) में。
CSS：
tooltip क्लास उपयोग करती है position:relative，टूलटिप टैक्स्ट को रखने के लिए उपयोग किया जाता है（position:absolute）。ध्यान दें कि टूलटिप को कैसे रखने के बारे में नीचे के उदाहरण को देखें。
tooltiptext क्लास वास्तविक टूलटिप टैक्स्ट को सहेजती है. डिफ़ॉल्ट में यह छुपी होती है और माउस होवर पर दिखाई देती है (देखें नीचे). हमने इसके लिए कुछ बुनियादी स्टाइल जोड़े हैं: 120 पिक्सल का आकार, काला पृष्ठभूमि, श्वेत टैक्स्ट, टैक्स्ट को मध्य में और 5 पिक्सल के ऊपरी और नीचे के आंतरिक किनारा (padding).
CSS border-radius प्रयोग करता है, ताकि टूलटिप टैक्स्ट को गोलाकार किया जा सके。
जब उपयोगकर्ता का माउस class="tooltip" के <div> पर जाता है तो:hover सेलेक्टर टूलटिप टैक्स्ट को दिखाने के लिए उपयोग किया जाता है。
लोकेशन टूलटिप
इस उदाहरण में, टूलटिप 'होवर' टैक्स्ट ( <div> ) के दायाँ ओर है (left:105%）。अन्यथा ध्यान देंtop:-5px इसे अपने कंटेनर एलिमेंट के मध्य में रखने के लिए उपयोग किया जाता है. हमने 5 का उपयोग किया है क्योंकि टूलटिप टैक्स्ट के ऊपरी और नीचे के आंतरिक किनारा 5 पिक्सल है. यदि आप इसके आंतरिक किनारा को बढ़ाना चाहते हैं, तो कृपया उसे भी बढ़ाए top विशेषता के मान को सुनिश्चित करने के लिए, ताकि यह बीच में बना रहे. यदि आप चाहते हैं कि टूलटिप को बाईं ओर रखें, तो यह भी लागू होगा.
राइट साइड टूलटिप
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
परिणाम:
लेफ्ट साइड टूलटिप
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
परिणाम:
अगर आप चाहते हैं कि टूलटिप ऊपर या नीचे हो, नीचे के उदाहरण को देखें. ध्यान दें कि हमने -60 पिक्सल का नकली बाहरी किनारा (margin-left) उपयोग किया है. यह टूलटिप को अवरोध टैक्स्ट से मध्य में केंद्रित करने के लिए है. यह वाला मान 60 है (120/2 = 60).
टॉप टूलटिप
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* आकार के आधे (120/2 = 60) का उपयोग करें, ताकि टूलटिप को मध्य में केंद्रित किया जा सके */
}
परिणाम:
बोटॉम टूलटिप
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* आकार के आधे (120/2 = 60) का उपयोग करें, ताकि टूलटिप को मध्य में केंद्रित किया जा सके */
}
परिणाम:
टूलटिप बाण
यदि आपने टूलटिप के निर्दिष्ट सामने की ओर दिखने वाले बाण को बनाना चाहते हैं, तो टूलटिप के बाद 'खाली' सामग्री जोड़ें और नकली एलिमेंट को उपयोग करें ::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;
}
परिणाम:
फेड इन टूलटिप (एनिमेशन)
यदि आप दिखाने वाले टूलटिप टेक्स्ट में फेड इन फेड आउट करना चाहते हैं, तो CSS transition अट्रिब्यूट के साथ opacity अट्रिब्यूट एक साथ उपयोग करते हैं, और निर्दिष्ट सेकंडों (उदाहरण में 1 सेकंड) के भीतर पूरी तरह से अदृश्य से 100% दृश्यीय होते हैं:
इंस्टांस
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- पिछला पृष्ठ CSS एनिमेशन
- अगला पृष्ठ CSS इमेज स्टाइल
