title: I have a trouble with tooltip. It doesn't show up
body: <p>Tooltip doesn't show up. I've tried to display it with<br><code>&lt;span id="error-dropdown"&gt;Here is error text&lt;/span&gt;</code> and <code>opacity</code> property in CSS, but it doesn't display anyway. <a href="https://jsfiddle.net/e1dkf9u8/" rel="nofollow noreferrer">Link</a></p>
  
  <pre><code>&lt;img src="https://symboldev.pp.ua/_data/error-sign.svg" alt="Error" id="error"&gt;
  </code></pre>
  
  <pre><code>#error {
      height: 30px;
      width: 30px;
  }
  
  #error::after {
      content: "Here is the tooltip text";
      display: block;
      width: 300px;
      height: 300px;
      background: #555;
  
      position: absolute;
      visibility: hidden;
  }
  
  #error:hover::after {
      visibility: visible;
  }
  </code></pre>