CSS से टॉप टूलटिप बनाएं

CSS में टॉप टूलटिप (ऊपर दिखने वाला टूलटिप) बनाने के लिए bottom प्रॉपर्टी का उपयोग करके टूलटिप को ट्रिगर एलिमेंट के ऊपर स्थित किया जाता है। left: 50% और margin-left से इसे हॉरिजॉन्टली सेंटर किया जाता है।

उदाहरण

नीचे दिए गए उदाहरण में, माउस होवर करने पर टेक्स्ट के ऊपर टूलटिप दिखाई देता है।

<!DOCTYPE html>
<html>
<style>
  .mytooltip .mytext {
    visibility: hidden;
    width: 140px;
    background-color: blue;
    color: #fff;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -70px;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
  }
  .mytooltip {
    position: relative;
    display: inline-block;
    margin-top: 50px;
  }
  .mytooltip:hover .mytext {
    visibility: visible;
  }
</style>
<body>
  <div class="mytooltip">Keep mouse cursor over me
    <span class="mytext"> My Tooltip text</span>
  </div>
</body>
</html>

मुख्य बिंदु:

• bottom: 100% - टूलटिप को पैरेंट के ऊपर किनारे से शुरू करता है
• left: 50% + margin-left: -70px (चौड़ाई का आधा) - हॉरिजॉन्टल सेंटरिंग
• margin-top पैरेंट पर - टूलटिप के लिए जगह बनाने के लिए