工具提示的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（而不是文檔主體）定位，它不會破壞佈局。