bootstrap - tooltip break td style

Question

The tooltip breaks the width of td.

Please see this Fiddle snippet http://jsfiddle.net/zhoujiealex/1d1bm9kc/

I want to show tooltip when mouse hover on truncated text in table.

I refere this post Show Bootstrap Tooltip Over Truncated Text

The difference is that above post use a <div> embed in <td>.

In my current project, old codes used <td> directly. The tooltip can show up, but it breaks the width of table. It's so wired.

No tooltip

tooltip shows:

Anyone can show me the right direction?

Answer 1

You could use a or span tags inside td and apply tooltip/popover to it. This will not break the tds of your table.

Or just use the built-in solution tooltip-append-to-body="true"

Please refer to this.

Answer 2

Just add container: 'body' in your code

$this.tooltip({
   title: $this.text(),
   placement: "bottom",
   container: 'body'
});

Check this out: http://jsfiddle.net/zhoujiealex/1d1bm9kc/

Read More: http://getbootstrap.com/2.3.2/javascript.html#tooltips