CSS工具提示定位

试图设计一个CSS弹出窗口。我知道那里有图书馆，无论如何我都是用手工做的。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

来源

2009-08-25 Dustin Getz

这些回答你的问题吗？ – 2009-08-25 21:05:23

这就是我想知道的:)我发现它常见的礼貌，直到他得到它或直到我可以说“我不知道”，但我认为他已经走了：P – 2009-08-25 21:16:37

我还没有它，但我放弃了这一天。 – 2009-08-25 21:31:03

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

来源

2009-08-26 16:39:24

所有你需要给.labelDiv溢出首先：可见。你能给出一个更详细的HTML例子或指向这个页面的链接吗？

CNC中也提示将需要的宽度或至少最小宽度以确保它不会调整到包含分区的大小

来源

2009-08-25 20:31:53

最小宽度将其悬停在输入框（其标签的同级分区）上，但它只是将空格扩展为看起来很蠢的空格。 – 2009-08-25 20:40:33

http://arnhemdenkthet.nl/wptheme/test.php 这两个例子都在IE7中工作，只有FF中的第二个，所以你需要一个最小宽度显然 z-indexes在这里没有改变任何东西 – 2009-08-25 20:40:48

哦，我错过了你的评论。 white-space：nowrap将确保工具提示文本在一行中，所以它将在边缘上展开并且不会添加空格，但是如果您需要多行，则需要换行符（
） – 2009-08-25 20:42:55

你不应该只是调整顶部和左侧属性相应？如果你这样做会怎样？

编辑

如果您的标签设定，说100px的对纯朴的缘故，则调整左侧为100px会使提示浮在你的输入字段。在这种情况下，需要考虑两件事情 - 您需要确保您的标签div具有溢出：可见并且它具有比您的输入字段更高的Z-index。

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

来源

2009-08-25 20:33:30

顶部和左侧只是调整框的左上角。它不会影响框的右侧边界。 – 2009-08-25 20:38:50

z-index在工具提示突破它的框但在输入字段下时需要。在此之前，甚至发生工具提示必须爆发，它不会因为它的宽度被调整到包含它的div。这里的问题是如何让工具提示突破而不是包装。 – 2009-08-25 20:48:50

嗯，让事情更清楚一点，在这种情况下，我不得不同意你的答案，他需要在他的工具提示上设置一个宽度 – 2009-08-25 20:59:33

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

所以我的答案是z-index。

它应该工作。

编辑

由于人造PAUS，因为它可能是。消极的右边缘会有诀窍吗？

来源

2009-08-25 20:36:30

我误解了这个问题，我以为你在出现UNDER输入框。 – 2009-08-25 20:59:17

它会，但是然后框会始终在输入字段上扩展完全相同的距离（即给出的负边距的量）。如果那是他想要的，那么是的，这也是一个解决方案。 – 2009-08-25 21:03:27

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

来源

2009-08-25 20:37:44 ferdley

是的，一个标签是需要验证，但不会帮助他的情况。他特别说他想自己设计弹出窗口，所以常规的工具提示不会 – 2009-08-25 20:46:28

CSS工具提示定位

回答

相关问题