工具提示的CSS定位

Question

我有一个工具提示，当用户点击该字段时，工具提示将打破td的宽度。

有没有解决方法？

我已经在这里工作的例子：

http://jsfiddle.net/yfM5T/

如果您在密码字段单击该TD的大小增加。我如何保持TD的大小并显示工具提示？

Answer 1

放入绝对位置的工具，顶：0，左：0

然后，通过MooTools或jQuery的，指定当它出现时，工具提示的X和Y位置应该是类似领域的地位+一些额外的空间（例如，该领域的wisth）

不要忘记添加一个条件，当有人调整屏幕时移动工具提示。

与jQuery，这里是一个为例（我不使用MooTools的，但我相信你可以做同样的）：

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

Answer 2

这.tooltip

position: absolute; 

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

Answer 3

添加position: absolute;添加到您的.tooltip类。这里拨动：http://jsfiddle.net/yfM5T/8/

Answer 4

将position:absolute;（css）添加到工具提示。 如果您希望它改变位置（使用左上角），您可以给容器元素（在您的情况下为<td>）position:relative;，工具提示的左侧和顶部将相对于td（而不是文档主体）定位，它不会破坏布局。