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

CSS में राइट टूलटिप (दाईं ओर दिखने वाला टूलटिप) बनाने के लिए left प्रॉपर्टी का उपयोग करके टूलटिप को ट्रिगर एलिमेंट के दाईं ओर स्थित किया जाता है।

उदाहरण

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

<!DOCTYPE html>
<html>
<style>
  .mytooltip .mytext {
    visibility: hidden;
    width: 140px;
    background-color: blue;
    color: #fff;
    z-index: 1;
    top: -6px;
    left: 100%;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
  }
  .mytooltip {
    position: relative;
    display: inline-block;
  }
  .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>

मुख्य बिंदु: left: 100% टूलटिप को पैरेंट एलिमेंट के दाईं ओर किनारे से शुरू करता है। position: absolute और पैरेंट पर position: relative होना आवश्यक है।