CSS से टूलटिप के बाईं ओर एरो (तीर) जोड़ें

CSS में टूलटिप के बाईं ओर एरो (तीर) जोड़ने के लिए ::after स्यूडो-एलिमेंट और CSS बॉर्डर ट्रिक का उपयोग किया जाता है। right प्रॉपर्टी से एरो को टूलटिप के दाईं ओर (यानी टूलटिप के बाईं ओर) पोजीशन किया जाता है।

उदाहरण

नीचे दिए गए उदाहरण में, टूलटिप के बाईं ओर एक नीला तीर बनाया गया है।

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

एरो बनाने की तकनीक:

• border-width: 6px - तीर का आकार
• border-style: solid - ठोस बॉर्डर
• border-color: transparent blue transparent transparent - केवल दायां बॉर्डर नीला, बाकी पारदर्शी
• right: 100% - टूलटिप के बाएं किनारे पर तीर