title: HTML-Tooltip position relative to mouse pointer
body: <p>How to align the tooltip the natural style: right bottom of the mouse pointer?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Tooltip with Image&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;style type="text/css"&gt;
      .tooltip {
          text-decoration:none;
          position:relative;
      }
       .tooltip span {
          display:none;
      }
       .tooltip span img {
          float:left;
      }
       .tooltip:hover span {
          display:block;
          position:absolute;
          overflow:hidden;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;a class="tooltip" href="http://www.google.com/"&gt;
      Google
      &lt;span&gt;
        &lt;img alt="" src="http://www.google.com/images/srpr/logo4w.png"&gt;
      &lt;/span&gt;
    &lt;/a&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>