tags:

views:

581

answers:

5
+1  A: 

First of all you'll need to give .labelDiv an overflow:visible. Can you give a more detailed HTML example or a link to this page?

-edit- also the tooltip will need a width or at least min-width to make sure it doesn't adjust to the size of the containing div

Litso
min-width floats it over the input box (its a sibling div of the label), but it just extends the box with whitespace which looks stupid.
Dustin Getz
http://arnhemdenkthet.nl/wptheme/test.phpboth examples work in IE7, only the second in FF so you'll need a min-width apparentlyz-indexes didn't change anything for me here
Litso
Oh, I missed your comment. white-space: nowrap will make sure the tooltip text is in one line, so it will expand over the edge and doesn't add whitespace, but if you want multiple lines you'll be needing linebreaks (<br />)
Litso
+1  A: 

Shouldn't you just adjust the top and left properties accordingly? What happens if you do?

EDIT

If your labels are set with, say 100px for simplicities sake, then adjusting the left to 100px will make the tooltip float over your input field. In this case there are two things to consider - you need to make sure your label div has overflow:visible and that it has a higher z-index than your input field.

If your label div is NOT set width you can adjust the right bound eg. right:0px which will put it on the right edge of the label. You can use negative numbers as well to make it break out of the label div in which case you will have to take the above two points into consideration as well.

Darko Z
top and left just adjust the upper left corner of the box. it does not affect the right bound of the box.
Dustin Getz
z-index is needed in case the tooltip does break out of it's box but goes under the input field. before that even happens the tooltip must break out, which it doesn't because it's width gets adjusted to the div that contains it. The problem here is how to get the tooltip to break out instead of wrap.
Litso
Ah that makes things a bit clearer, in that case i'd have to agree with your answer that he will need to set a width on his tooltip
Darko Z
+1  A: 

We do need a little more info but try adding a z-index to the ".labelDiv" that is greater than the z-index of the input box. You may need to add a positioning to theinput box to make it accept z-index. I if it's a floated element I usually add "position:relative;float:left" to the element that I need lower but don't need to position it.

So my answer is z-index.

It should work.

EDIT

As faux paus as it might be. Would a negative right margin do the trick?

Vian Esterhuizen
I misunderstood the question, I thought you were having problems with the box appearing UNDER the input box.
Vian Esterhuizen
it would, but then the box would always expand over the input field the exact same distance (that is, the amount of negative margin given). If that is what he wants, then yes that would be a solution too.
Litso
A: 

Couple of things, you should probably be using the <label> tag to declare the label for the input field. Using the title attribute on the input with the text of your tooltip will create the hover text you want over the input field and the browser will do all the work for you.

ferdley
yes, a label is required to validate but won't help his case. he specifically says he wants to style the popup himself, so the regular tooltip won't do
Litso
A: 

You guys were right, more HTML context was necessary. I ended up promoting the tooltip div all the way up to the body element, then manually positioning it relative to the appropriate label. I couldn't get the browser to do it for me without similar minor issues.

Dustin Getz