Question

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

这有什么解决方案吗？

我在这里有一个有效的例子：

如果单击密码字段，则TD的大小会增加。如何保持TD的大小不变并显示工具提示？

Answer 1

将此添加到.tooltip

position: absolute;

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

Answer 2

将position: absolute;添加到.tooltip课程。在这里小提琴：http://jsfiddle.net/yfM5T/8/

Answer 3

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

Answer 4

将工具置于绝对位置，顶部：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");
});

工具提示的CSS定位

4 个答案: