JQuery Tooltip Plugin: Bottom Tooltips
I am using the JQuery Tooltip Plugin - http://docs.jquery.com/Plugins/Tooltip
With basic implementation:
$(".tooltip").tooltip();
Instead of the tooltip being positioned above the input field, it is owned and tracked with the mouse, it is placed at the bottom of the page.
The input is basic and looks like this:
<input type="text" name="testTooltip" class="tooltip" title="This is the tooltip" />
I removed the CSS in my enthusiasm and the problem remains (no inline CSS).
Any ideas as to what might be causing this?
+2
source to share
2 answers
I had the same problem because I was not including the default styles specified 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 can use Firebug with Firefox to check the styles applied to the #tooltip div, or you can check your stylesheets to make sure those styles are included. In particular, "position: absolute"; is critical.
+10
source to share