title: Dynamically position css tooltip
body: <p>I have a tooltip solution developed in HTML + CSS:</p>
  
  <p>HTML part:</p>
  
  <pre><code>&lt;a href="#" class="tooltip"&gt;
  Tooltip
  &lt;span&gt;
      &lt;strong&gt;Light-weight CSS Tooltip&lt;/strong&gt;&lt;br /&gt;
      This is the easy-to-use Tooltip driven purely by CSS.&lt;br/&gt;
      And this is some additional text 
      &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
      More additional text
  &lt;/span&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>a.tooltip {outline:none;}
  a.tooltip strong {line-height:30px;}
  a.tooltip:hover {text-decoration:none;}
  a.tooltip span {
         z-index:10;
         display:none;
         padding:14px 20px;
         margin-top:-50px;
         margin-left:28px;
         width:70%;
         line-height:16px;}
  
  a.tooltip:hover span {
         display:inline;
         position:absolute;
         color:#111;
         border:1px solid #DCA;
         background:#fffAF0;}
  
  a.tooltip span {
         border-radius:4px;
         box-shadow: 5px 5px 8px #CCC;}
  </code></pre>
  
  <p>This works very well with an exceptions: If the span displaying the tooltip is to far down on the bottom of the window then the user wont see the whole tooltip.</p>
  
  <p>Is there a way to somehow dynamically position this tooltip so its contents all the time when he hovers to the span?</p>
  
  <p>(I am an absolute rookie in html, so please answer keeping this in mind)</p>
  
  <p><strong>UPDATE: would it be possible to display the tooltip always at the middle of the screen? That would not be a solution for the original problem, but would be a solution for me.</strong></p>