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

i trying place tooltip on table elements (td). although, when tooltip displayed, changes width of td element, though tooltip has position of absolute.

why this?

demo

tooltip inserts div after specified dom element. in case, div inserted between tds, messes render flow (block vs table display). effectively, browser trying render zero-width div td border styling. update code specify valid parent element. commonly body element used. invoke

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

updated fiddle:

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

if you're having hard time viewing hover state in browser inspector, right click element , preserves state inspection.