title: CSS tooltip on image is messed
body: <p>Why is this text after using <code>display:relative</code> in <code>.tooltip:hover span</code> messed ? I want to make my page selative to svk.png. Not fixed positions.
  <img src="https://i.stack.imgur.com/5oIWz.png" alt="enter image description here"></p>
  
  <p>html</p>
  
  <pre><code>&lt;figure&gt;
       &lt;img class="slovensko" src="svk.png" alt="mapa slovenska"&gt;
      &lt;/figure&gt;
      &lt;div&gt;
      &lt;p&gt; &lt;a class="tooltip" href="#"&gt;
      &lt;img id="ZilPic" src="circle.png" alt=""&gt;
      &lt;span id="ZilTool"&gt;text&lt;br&gt;
          texttexttexttext&lt;sup&gt;2&lt;/sup&gt;&lt;br&gt;
          texttexttexttexttext&lt;br&gt;
          texttexttexttexttexttext&lt;br&gt;
          texttexttexttexttext&lt;br&gt;
          texttexttexttexttext&lt;br&gt;
          texttexttexttexttexttext&lt;br&gt;    
      &lt;/span&gt;
      &lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
  </code></pre>