CSS से माउस होवर पर दिखने वाला टूलटिप बनाएं

CSS में visibility प्रॉपर्टी और :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>

मुख्य बिंदु:

• visibility: hidden - टूलटिप को छिपाता है लेकिन स्पेस लेता है
• visibility: visible - होवर पर दिखाता है
• position: absolute - टूलटिप को पैरेंट के सापेक्ष पोजीशन करता है