Question

尝试设置CSS弹出窗口的样式。我知道有图书馆，无论如何我都是手工制作。

<div class="labelDiv">
    <span class="label helpText">Description</span>
    <div id="activeHelpTip" class="helpTip messageBox">
        Help text not defined for this field.
    </div>
</div>

.labelDiv { float: left; position: relative; } 
.helpTip
{
    display: block;
    position: absolute;
    padding:2px;
    max-width:350px;
    z-index:1;
    left: 5px;
    top:22px;
}

.labelDiv是位置rel，因此绝对.helpTip相对于其拥有的labelDiv是绝对的。 AFAICT .helpTip必须是绝对的，因此在正常的页面流中会被忽略。

如何让我的工具提示浮动到右侧的输入框？我想让它漂浮在除浏览器边缘之外的所有东西上。

http://img213.imageshack.us/img213/278/popupcss.png

Answer 1

首先，你需要给.labelDiv一个溢出：可见。您能提供更详细的HTML示例或此页面的链接吗？

CNC中工具提示还需要宽度或至少最小宽度，以确保它不会调整到包含div的大小

Answer 2

您是否应该相应地调整顶部和左侧属性？如果你这样做会怎么样？

修改

如果您的标签设置为100px，为简单起见，那么将左侧调整为100px将使工具提示浮动在您的输入字段上。在这种情况下，有两件事需要考虑 - 你需要确保你的标签div有溢出：可见，并且它的z-index比输入字段高。

如果您的标签div未设置宽度，您可以调整右边界，例如。 right:0px将它放在标签的右边缘。您也可以使用负数使其脱离标签div，在这种情况下，您还必须考虑上述两点。

Answer 3

我们确实需要更多信息，但尝试在“.labelDiv”中添加一个z-index，它大于输入框的z-index。您可能需要向输入框添加定位以使其接受z-index。我，如果它是一个浮动元素，我通常将“position：relative; float：left”添加到我需要较低但不需要定位的元素。

所以我的答案是z-index。

它应该有用。

修改

尽管它可能是假的。负右边距是否会成功？

Answer 4

很多事情，你应该使用<label>标签来声明输入字段的标签。使用输入中的title属性和工具提示的文本将在输入字段上创建所需的悬停文本，浏览器将为您完成所有工作。

Answer 5

你们是对的，更多HTML背景是必要的。我最终将工具提示div一直提升到body元素，然后相对于相应的标签手动定位它。没有类似的小问题，我无法让浏览器为我做这件事。

CSS工具提示定位

5 个答案: