Bootstrap Tooltips initialising but not showing

Question

I am trying to set up Bootstrap Tool Tips and it doesn't seem to be working.

<p>This is a <a href="#" title="A collection of words.">sentence</a> with a tooltip</p>​

and

$(document).ready(function(){
    $("a").tooltip();
});​

I have set up the following jsFiddle

The html appears to be transformed to the following:

<p>This is a <a href="#" data-original-title="A collection of words.">sentence</a> with a tooltip</p>

And the tooltip html is rendered:

<div class="tooltip fade top in" style="top: -34px; left: 20.5px; display: block; "><div class="tooltip-arrow"></div><div class="tooltip-inner">A collection of words.</div></div>

With the correct CSS styles:

But it is never shown in the browser?

Answer 1

It does work, it's just that in jsfiddle, everything outside the HTML box is hidden.

Updated version to show padding: http://jsfiddle.net/ytpAy/3/

Fred