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

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");
});