How to align the tooltip the natural style: right bottom of the mouse pointer?

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Tooltip with Image&lt;/title&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;style type=&quot;text/css&quot;&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=&quot;tooltip&quot; href=&quot;http://www.google.com/&quot;&gt;
        Google
        &lt;span&gt;
          &lt;img alt=&quot;&quot; src=&quot;http://www.google.com/images/srpr/logo4w.png&quot;&gt;
        &lt;/span&gt;
      &lt;/a&gt;
    &lt;/body&gt;
    &lt;/html&gt;

All Mousehover Solutions on Gang of Coders

Total of 1 Mousehover Solutions

HTML-Tooltip position relative to mouse pointer