टूलटिप एक छोटा पॉपअप बॉक्स होता है जो उपयोगकर्ता द्वारा किसी तत्व पर माउस कर्सर ले जाने पर दिखाई देता है। यह अतिरिक्त जानकारी प्रदान करने के लिए उपयोगी होता है। CSS में visibility, position, और :hover का उपयोग करके टूलटिप बनाया जा सकता है।
उदाहरण
नीचे दिए गए उदाहरण में एक बेसिक टूलटिप बनाया गया है जो माउस होवर पर दिखाई देता है।
<!DOCTYPE html>
<html>
<style>
#mytooltip #mytext {
visibility: hidden;
width: 100px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 3px;
padding: 10px 0;
position: absolute;
z-index: 1;
}
#mytooltip:hover #mytext {
visibility: visible;
}
</style>
<body>
<div id="mytooltip">Hover the mouse over me
<p id="mytext">My Tooltip text</p>
</div>
</body>
</html>
टूलटिप के मुख्य घटक:
- कंटेनर:
position: relativeवाला पैरेंट एलिमेंट - टूलटिप टेक्स्ट:
position: absoluteवाला चाइल्ड एलिमेंट - ट्रिगर:
:hoverस्यूडो-क्लास
