CSS Tooltip inside scrolling div

Question

I have a simple CSS help popup that's been working well for me in most simple layouts. But now it needs to work inside a scrolling div.

Given the example HTML:

<div style="overflow:scroll; width:80px">
<a href="#" class="tooltip">
an image
<span>some hidden tooltip which is a bit longer in here</span>
</a>
</div>

(Note: in the real world there will be multiple things with tooltips inside the scrolling div)

I have the CSS:

a.tooltip span 
{
display:none;
position:absolute;
padding:0px 0px 2px 2px;
background:yellow; 
text-decoration:none;
vertical-align:top;
}

a.tooltip:hover span
{
display:inline; 
position:absolute;
padding:0px 0px 2px 2px;
top:0;
left:18px;
background:yellow; 
text-decoration:none;
vertical-align:top;
z-index:5;
}

a.tooltip 
{
border-width:0px; 
text-decoration:none;
}

a.tooltip:hover
{
border-width:0px; 
text-decoration:none;
position:relative;
}

Is it possible to have the popup pop out of the scrolling div so it's readable without causing the div to scroll?

Is this achievable in CSS alone, without using javascript?

edit: Live Example kindly provided by Kyle Sevenoaks.

Answer 1

You can set the :hover on the entire DIV. and place your span directly in the div. (This solution does not work in IE6 for example).

see a working example here: http://jsfiddle.net/5mASU/1/

Or you could set i higher z-index to the tooltip and use position fixed, it works: http://jsfiddle.net/5mASU/3/

also avoid resetting the same values in the hover here is a cleaned up version: http://jsfiddle.net/5mASU/4/

if for example you set

a {
  padding: 5px; 
}
a:hover {
  // no need to reset the padding here
}

you don't need to reset the padding in the :hover the hover heritages the padding form the style set for the a. Just reset values you want to change between the normal and the hover status.

Answer 2

I don't think it's possible, because z-indexes work from the parent, the child element won't be able to display the span over the top. This CSS tooltip just adds another element when the <a> is hovered. I think you might have to go the jQuery route.

Also, try to post live examples of your problem instead of a long list of HTML and CSS, it's easier for us to help you :)