Best way to represent a tooltip on a table
<p>I have a table with lot of information that needs to display on each cell. I currently have images to represent the presence of information and on hover of these images, I would like to display additional info. I was impressed with the meetup.com and facebook style tool tips divs which display more information on hover and the div would expand based on the amount of information. Which is the best way to represent this kind of info? I would like to use jQuery/Javascript/HTML/CSS to achieve this effect.</p>

<p>Note 1: I have looked at few jquery plugins but they all seem to use the title attribute of a tag to represent the information. But I have large amount of information I need to show on the tooltip and also need to style the information so using title attribute is not very helpful.</p>

<p>Note 2: The tooltip also needs to adjust its position if the left/right or bottom/top of the table is detected. </p>

<p>see the image to get a look at the table that is likely to contain the above format.</p>

<p><img src="http://i.stack.imgur.com/UnPz0.png" alt="http://imgur.com/f8EQf"></p>
