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

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

उदाहरण

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

<!DOCTYPE html>
<html>
<style>
  .mytooltip .mytext {
    visibility: hidden;
    width: 140px;
    background-color: blue;
    color: #fff;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
  }
  .mytooltip {
    position: relative;
    display: inline-block;
  }
  .mytooltip .mytext:after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -10px;
    border-width: 3px;
    border-style: solid;
    border-color: transparent transparent blue 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: 3px - तीर का आकार
• border-style: solid - ठोस बॉर्डर
• border-color: transparent transparent blue transparent - केवल नीचे का बॉर्डर नीला, बाकी पारदर्शी
• bottom: 100% - टूलटिप के ऊपरी किनारे पर तीर
• left: 50% + margin-left: -10px (बॉर्डर-चौड़ाई का आधा) - हॉरिजॉन्टल सेंटरिंग