CODEWITHSUNDEEP
jquerytooltip
bcmcfc
bcmcfc

Reputation: 26795

JQuery tooltip plugin: tooltips showing at bottom of page

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?

Upvotes: 2

Views: 4767

Answers (3)

D M
D M

Reputation: 320

like the answer from @Brad Griffith

position: absolute;
z-index: 3000;

did the trick for me

Upvotes: 0

Brad Griffith
Brad Griffith

Reputation: 451

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.

Upvotes: 11

Greg
Greg

Reputation: 321766

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

Upvotes: 0

Related Questions