Bootstrap 3 Toolstips in <th> breaks layout

Question

I add tooltips in this way to an element, but when the tooltip appears, it breaks the table layout.

<th data-toggle="tooltip" data-placement="top" title="title">Heading</th>
...
<script type="text/javascript">
$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>

I found this solution https://github.com/angular-ui/bootstrap/issues/580 but it is not helping with bootstrap 3.

What is the right way to do it?

Answer 1

Wrap your heading in span with tooltip:

<th>
   <span data-toggle="tooltip" data-placement="top" title="title">Heading</span>
</th>

Here is working example: http://jsfiddle.net/DTcHh/5501/