Bootstrap tooltip not working inside table

Question

DEMO LINK

I am trying to include a tooltip inside the table but when mouse hovers it streches the tables and tooltip text isn't showing up correctly as well on the website.

How can I fix this?

CSS:

.infotext {
    background: url(http://s17.postimg.org/k71a0r6m3/info_Icon.png) 0 0px no-repeat;
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: text-bottom;
}

Answer 1

If you add the following CSS, it should work

td .tooltip {
    position:absolute
}

http://jsfiddle.net/z33j5/2/

Without this, the tooltips had a position:relative which meant they were rendered in the table cell