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

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 🙂