CSS positioning of tooltip

Question

I have a tooltip and when the user clicks on the field, the tooltip breaks the td 's width.

Is there any solutions to this?

I've a working example here:

http://jsfiddle.net/yfM5T/

If you click on the password field the size of that TD increases. How can I keep the size of TD intact and show the tooltip?

Answer 1

Add this to .tooltip

position: absolute;

http://jsfiddle.net/yfM5T/9/

Answer 2

Add position: absolute; to your .tooltip class. Fiddle here: http://jsfiddle.net/yfM5T/8/

Answer 3

Add position:absolute; (css) to the tooltip. If you want it to change the position (using top and left), you can give the container element (in your case the <td> ) position:relative; and left and top of your tooltip will be positioned relative to the td (not the document body) and it won't break the layout.

Answer 4

Put the tool in absolute position, top:0, left:0

then, with mootools or jquery, specify that when it appears, the tooltip's X and Y positions should be similar to the field's position + some extra space (the field's wisth, for example)

and don't forget to add a condition that moves the tooltip when someone resizes the screen.

With JQuery, here's an exemple (I don't use mootools, but I assume you can do the same) :

function placeTooltip() {
    $("#tooltip").css("left",$("#field").position().left + $("#field").width());
    $("#tooltip").css("top",$("#field").position().top - $("#tooltip").height());
}

//Places tooltip on page load
$(document).ready(function() {
    placeTooltip();
});

//Places tooltip on page resize
$(window).resize(function() {
    placeTooltip();
});

$("#field").mouseenter(function() {
    $("#tooltip").fadeIn("normal");
});