title: jquery floating div on hover
body: <p><strong>What I have?</strong></p>
  
  <ol>
  <li><p>A html-table which has a lot of rows. </p></li>
  <li><p>A hidden (display=none) div which contains some input controls (lets call it "div-to-display"). Only one div-to-display in whole page.</p></li>
  </ol>
  
  <p><strong>What I'm trying to do?</strong></p>
  
  <p>When the mouse hovers on the first cell in each row - show the "div-to-display" below it (like tool tip).</p>
  
  <p><strong>But</strong>, I can't create a separated div-to-display div for each table row. All cells must use the same "div-to-display" element.</p>
  
  <p>While showing the div-to-display div, it should be float. What it means is that it won't change the location of the other cells in the table. It will be above them.</p>
  
  <p>Do you have idea how to do this with <code>jquery</code>`javascript`?</p>