Investgate the effect of insertAfter in jQuery
===

To understand the effect of [.insertAfter][1], I designed a small table test that has 2 rows and 2 columns.

     <table id="myTable" width="560" border="1" cellspacing="2" cellpadding="2">
            <tr>
              <td title="row 1*1" class="styletest">1*1</td>
              <td title="row 1*2" class="styletest">1*2</td>
            </tr>
            <tr>
              <td title="row 2*1" class="styletest">2*1</td>
              <td title="row 2*2" class="styletest">2*2</td>
            </tr>
         </table>

The jquery code is:

    var $tooltip = $('<div id="tooltip"></div>');
    $tooltip.insertAfter('#myTable').hide();//I want to know the code after inserting this element.

    function showTooltip(cell) {
        $tooltip.show().text(cell.attr("title"));
    }
    $('.styletest').hover(function() {
        showTooltip($(this));
     }, function() {
        $tooltip.hide();
     });

The test includes hovering different cells and display tooltips.
The demo is at [jsfiddle.][2]

I want to know the source code when I hover different cells.
For example, when I hover row 1, column 1, the snapshot likes:
![row1col1][3]
When I hover row 2, column 2, the snapshot likes:
![row2col2][4]

Questions:
When mouse hovers row 1 column1 and row 2 column 2;
1. Do they have the same rendered source code?(Using F12 can't get the rendered code when hovering)
2. Why the tooltips are displayed in the same position that seems in the middle? 

Thanks. 
  [1]: http://api.jquery.com/insertAfter/
  [2]: http://jsfiddle.net/zhshqzyc/twPZA/1/
  [3]: http://i.stack.imgur.com/g2Oke.png
  [4]: http://i.stack.imgur.com/k2M3K.png