Why does Bootstrap Tooltip not work correctly when placed inside a table?

Question

I am trying to place a TOOLTIP on table elements (td). Although, when the tooltip is displayed, it changes the width of the td element, even though the tooltip has a position of absolute.

Why is this?

DEMO

Answer 1

Tooltip inserts a div after the specified dom element. In your case, the div is inserted between TDs, which messes with the render flow (block vs table display). effectively, the browser is trying to render a zero-width div with the TD border styling. Just update your code to specify a valid parent element. Most commonly the body element is used. So invoke

$(selector).tooltip({container:'body'});

Updated fiddle:

http://jsfiddle.net/8S2SR/1/

If you're having a hard time viewing the hover state in your browser inspector, right click the element and it preserves the state for inspection.

Answer 2

An alternative to murraybiscuit's answer is adding

data-container="body"

in the attribute list. This way, you avoid using extra jquery.