JQuery tooltip plugin: tooltips showing at bottom of page

Question

I'm using the JQuery tooltip plugin - http://docs.jquery.com/Plugins/Tooltip

With the basic implementation:

$(".tooltip").tooltip();

Instead of the tooltip placing itself over the input box it belongs to and tracking with the mouse it is placing itself at the bottom of the page.

The input is basic and is like this:

<input type="text" name="testTooltip" class="tooltip" title="This is the tooltip" />

I've stripped out the CSS in its entirity and the problem remains (there's no inline CSS).

Any ideas as to what could be causing this?

Answer 1

The Tooltip plugin depends on the dimensions plugin - do you have that loaded?

Answer 2

I had the same problem because I was not including the default styles provided in jquery.tooltip.css:

#tooltip {
    position: absolute;
    z-index: 3000;
    border: 1px solid #111;
    background-color: #eee;
    padding: 5px;
    opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }

You could either use Firebug with Firefox to check the styles applied to the #tooltip div, or you could check your style sheets to make sure these styles are included. In particular, "position: absolute;" is critical.