title: How to create an html tooltip that never goes off screen?
body: <p>I'm creating a tooltips for educational purpose. </p>
  
  <p>Assume the tooltip could be created at any position on the page dynamically. </p>
  
  <p>I'd like to know the best way to make tooltips positioned in such a way that never go off the screen without changing their content or size.</p>
  
  <p>edit:  Or without using another tooltip library.</p>
  
  <pre><code>.has-tooltip:hover ~ div {
      display: block;
  }
  </code></pre>
  
  <p>edit:  example fiddle of a tooltip that could go off screen in some situations: <a href="http://jsfiddle.net/n94rv/13/embedded/result/" rel="noreferrer">http://jsfiddle.net/n94rv/13/embedded/result/</a></p>