title: How to positioning the tooltip above cursor
body: <p>I'm implementing a tooltip css only in my new website project.</p>
  
  <p>But how can I set the tooltip to show up above the cursor?</p>
  
  <p>The CSS that I have:</p>
  
  <pre><code>a.tooltip {outline:none;}
  a.tooltip strong {line-height:30px;}
  a.tooltip:hover {text-decoration:none; cursor: help;} 
  a.tooltip span {
  z-index:10;display:none; padding:14px 20px;
  margin-top:-30px; margin-left:28px;
  width:220px; line-height:17px;
  }
  
  a.tooltip:hover span{
  display:inline; position:absolute; color:#373535;
  border:2px solid #D3D3D3; background:#fffFff;}
  
  /*CSS3 extras*/
  a.tooltip span
  {
      border-radius:5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
  
      -moz-box-shadow: 1px 1px 8px #CCC;
      -webkit-box-shadow: 1px 1px 8px #CCC;
      box-shadow: 1px 1px 8px #CCC;
  }
  </code></pre>
  
  <p>This is the html:</p>
  
  <pre><code>&lt;a href="#" class="tooltip"&gt;Normal Text&lt;span&gt;&lt;strong&gt;Tooltip title&lt;/strong&gt;&lt;br /&gt;This would be the content of the tooltip that I want to show up above the cursor.&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Thanks for help me out guys!</p>
  
  <p>Regards,
  Dylan</p>