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

Accepted Answer

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.

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

Solution

Problem