Add Hover display for table cell

I have a table, but it is not in a list format, meaning not a column/row format. I look for specific cells to add a hover event that displays a description of the cell.

$("#TableID td").hover(function(){
//ifCellThatIWant
   $(this).append("<span>Message that was brought in</span>");
   },
   function(){
    $(this).children().remove();
    });

The problem is right now is that the hover displays a span(with info. inside) that I used jquery to append the span to the cell when mouseover, which expands the cell, which is an effect that I don't like or want. I'm Trying to have an out of the table look,but still be by the cell that triggered the event; because if the span has a lot of info. in it, expanding the cell dynamically will start to look pret开发者_运维百科ty nasty. Also will help if I had some type of css direction on how will I make the display for the mouseover "description" span look nice. My mind thought is that a way to accomplish what I want is giver the appended span the position of my mouse cursor when hover, but not sure if its the right approach or what the syntax would look like.

Make the span display as block and set the z-index greater than anything else on the page. Then you can absolute position it and set the left and top properties to the x and y positions of the mouse location.

EDIT:

Here's a demo of what I mean --> http://jsbin.com/odape. Instead of appending a span, I would suggest just creating a placeholder one at the bottom of your html to use for each cell and just change the text to display (not sure how you were bringing it in so I didn't add it in my example.