Position span to hang over the relative parent - html

Question

I'm trying to position a span so that it will be above it's sibling and "hang over" or be positioned on top of it's parent. The parent is relatively positioned.
Please view my fiddle to get the whole picture
What it currently looks like...
This is what I want it to look like...
The span (tooltip):
.grid-window span.validation-message:after {
border-color: #F2DEDE transparent transparent;
border-style: solid;
border-width: 8px;
content: "";
height: 0;
left: 0;
position: absolute;
top: 40px;
width: 0;
}
.grid-window span.validation-message {
background: none repeat scroll 0 0 #F2DEDE;
border: 1px solid #EED3D7;
border-radius: 3px 3px 3px 3px;
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.098);
color: #B94A48;
font-size: 14px;
height: 20px;
left: 263px;
line-height: 20px;
padding: 10px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.098);
top: -26px;
width: 100px;
}
The parent element:
element.style {
display: block;
height: auto;
left: 488px;
outline: 0 none;
top: 100px;
width: 400px;
z-index: 1002;
}
.ui-dialog {
overflow: visible;
padding: 0.2em;
position: absolute;
width: 300px;
}
UPDATE
As suggested by Rohrbs, if I explicitly set the width of the span (tooltip) then it will indeed hang over the form. But this isn't practical since each tooltip could potentially display a different message. So my question now becomes - How can I set the width to be dynamic and still have the span (tooltip) hang over the form?

Answer 1

Style your .grid-window .control-group .controls to be position: relative; then only your absolute positioned .grid-window span.validation-message will work as you want.
See This Fiddle
Update
You wanted to be your tool-tip width variable so I have replaced the position: absolute; to position: relative; in .grid-window span.validation-message and added left: 175px; top: -25px; float: left; and also min-width: 0; max-width: 500px; width: auto; also work. to make this work as you want. Note to float is a must else it won't work.
So, main changes (most important part) are float: left; position: relative; to .grid-window span.validation-message and also you need not to declare position: relative; to .grid-window .control-group .controls
See This Fiddle

Answer 2

If you manually set the width in the class .grid-window span.validation-message to say width: 50%; it will hang over the edge like you want. You will just have to keep the message short enough to ensure proper fitment.

Answer 3

On the .ui-dialog .ui-dialog-content DIV just change the overflow from auto to visible, and it will help

Answer 4

I managed to resolve your issue with only minor changes to your CSS and HTML(class names).
You can see the results via your updated fiddle: http://jsfiddle.net/aNkSw/16/
I added a different class for each span, and tweaked only this CSS bit to:
.grid-window span.validation-message-id:after, .grid-window span.validation-message-name:after {
border-color: #F2DEDE transparent transparent;
border-style: solid;
border-width: 8px;
content: "";
height: 0;
width: 0;
position: absolute;
bottom: -16px;
left: 10px;
}
.grid-window span.validation-message-id {
background: none repeat scroll 0 0 #F2DEDE;
border: 1px solid #EED3D7;
border-radius: 3px 3px 3px 3px;
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.098);
color: #B94A48;
font-size: 14px;
line-height: 20px;
overflow: visible;
padding: 10px;
position: absolute;
margin: -81px 0 0 0;
left: 292px;
z-index: 99;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.098);
width: 200px;
}
.grid-window span.validation-message-name {
background: none repeat scroll 0 0 #F2DEDE;
border: 1px solid #EED3D7;
border-radius: 3px 3px 3px 3px;
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.098);
color: #B94A48;
font-size: 14px;
line-height: 20px;
overflow: visible;
padding: 10px;
position: absolute;
margin: -41px 0 0 0;
left: 292px;
z-index: 99;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.098);
width: 200px;
}
I can't say I agree with how you coded the whole thing though.

Answer 5

If you could use an extra element here's a solution I use a lot for this kind of positioning:
HTML:
<div class="validation-message-wrapper">
<span class="validation-message" style="">Please enter a number</span>
</div>
CSS:
.validation-message-wrapper {
width:0;
position: absolute;
right: 70px;
top: 0;
height: 0;
}
The clue is to create a zero size reference point ( the .validation-message-wrapper ) position it where you want and then position your element in relation to it.
Here's a working demo: DEMO
I also did some other minor CSS changes just to tune it a bit:
.ui-dialog .ui-dialog-titlebar {
padding: 0.4em 1em;
position: relative;
}
.grid-window span.validation-message:after {
border-color: #F2DEDE transparent transparent;
border-style: solid;
border-width: 8px;
content:"";
height: 0;
left: 0;
bottom: -16px;
position: absolute;
width: 0;
}
.grid-window span.validation-message {
background: none repeat scroll 0 0 #F2DEDE;
border: 1px solid #EED3D7;
border-radius: 3px 3px 3px 3px;
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.098);
color: #B94A48;
font-size: 14px;
height: auto;
left: 0px;
bottom: 0;
line-height: 20px;
padding: 10px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.098);
margin-top: -40px;
width: 200px;
}
I hope that helps.
If you'd like something more generic I've made a jQuery tooltip plugin (tipy) which is pretty easy to use and implement.