title: CSS tooltip arrow is not working
body: <p>I have been trying to make one tooltip. Something like in the below image which appears when I hover on image:</p>
  
  <p><a href="https://i.stack.imgur.com/hytOi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hytOi.png" alt="Tooltip"></a></p>
  
  <p>Problem is the below triangle arrow is not coming at all. I have googled it a lot and went through previously asked stackoverflow question. But no luck. I am going to put code below, could you please let me know where I am going wrong:</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;span class="help-tooltip" tooltip-text="Lorem ipsum dolor sit amet, consectetur
               adipiscing elit. Donec non diam enim. Quisque leo erat, vulputate id mi  et, pharetra vulputate sapien."&gt;
  
              &lt;img src="/static/img/help.png"&gt;
   &lt;/span&gt;
  </code></pre>
  
  <p>Below is my css code:</p>
  
  <pre><code>span[tooltip-text]:hover:after {
      content: attr(tooltip-text);
      padding: 8px 8px;
      color: white;
      position: absolute;
      left: -60px;
      bottom: 120%;
      width: 275px;
      height: auto;
      background: #0679ca;
      border-radius: 10px;
  }
  
  .help-tooltip:hover {
      position: relative;
  }
  </code></pre>