title: Big tooltip outside window
body: <p>I have a list in the left side of my page with a tooltip (on hover) for each element.
  I show the tooltip on right of each element but the tooltip content is sometimes big (10-30 lignes). When I display the tooltip of last items of my list, <strong>its bottom part is outside the browser</strong>.</p>
  
  <p>Is it possible to get the tooltip always in the window. For example, when the mouse in on the firsts elements of the list, I should get the top of the tooltip right of my mouse and when I hover the last element, I should get the bottom of the tooltip right of my mouse.</p>
  
  <p>A solution in CSS would be perfect but JavaScript is possible.</p>
  
  <p>Thanks</p>
  
  <p>Actual CSS:</p>
  
  <pre><code>.menu-item .tooltiptext {
      visibility: hidden;
      width: 360px;
      background-color: #e5e5e5;
      color: black;
      border-radius: 6px;
      padding: 15px;
      position: absolute;
      z-index: 100;
      top: -50%;
      left: 110%;
      border: solid 1px #333;
  }
  
  .menu-item:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
  }
  </code></pre>