title: How to make text expand div to the top
body: <p>I have three div's and the "show info" item inside each of them. When user hovering with mouse on the "show info" item he can see some text with additional information that appears above "show info" item. But the additional information in different div's can have different text length. Some information can be short and some long... well that makes a problem that text expand the size of div that wrap the information to the bottom and because of this it covers the "info" item. You can clearly understand the problem in my example when hovering the second div "show info"(subject 2). The main goal is to make text expand size of its wrapper to the top, and not cover the "show info" item.<br>
  <br>
  <a href="https://jsfiddle.net/y3srrob1/2/" rel="nofollow">JSFIDDLE EXAMPLE LINK</a></p>
  
  <p><br>
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
   $('.hoverinfo').mouseover(function(){
    $(this).prepend('&lt;div class="info"&gt;&lt;/div&gt;');
    $('.info').html($(this).attr("data-info"));
    $('.info').fadeIn();
   }).mouseleave(function(){
    $('.info').remove();
   });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.subject{
    width:400px;
    height:100px;
    background:lightblue;
  }
  .subject:nth-of-type(2){
    background:lightgrey;
  }
  .subject:nth-of-type(3){
    background:lightgreen;
  }
  .info {
    position:absolute;
    color:black;
    width: 200px;
    background-color:lightcyan;
    border: solid 2px black;
    text-align: center;
    margin-top: -30px;
    display: none;
  }
  .hoverinfo {
    background:pink;
    float:right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;div class="subject"&gt;
   &lt;div class="hoverinfo" data-info="The text from subject 1 - OK!"&gt;show info(hover it)&lt;/div&gt;
   &lt;span&gt;subject 1&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="subject"&gt;
   &lt;div class="hoverinfo" data-info="There is more text inside and this is a problem because text expand div to the bottom - PROBLEM!"&gt;show info(HOVER IT)&lt;/div&gt;
   &lt;span&gt;subject 2 - here is a problem&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="subject"&gt;
   &lt;div class="hoverinfo" data-info="The text from subject 3 - OK"&gt;show info (hover it)&lt;/div&gt;
   &lt;span&gt;subject 3&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>