[stealthcow]

The scenario:

On the front page of www.housingpeopleltd.com/new you will see an area on the left with scrolling links that point to the various jobs on the site. When you mouseover the links, a CSS "tooltip appears".

The problem is that the scrolling text is contained within a div that has the overflow: hidden property set. This is so that any of the links that aren't in that area on the page won't be shown. Unfortunately, that means that the tooltip has the same rules applied to it - if the box is longer/wider than the container div then the content of the tooltip is hidden.

What I need to be able to do is keep the current system of scrolling the links but show the tooltip above this div so that people can read the whole description.

Here is the code for the container div:

#marqueecontainer{
position: relative;
top: 68px;
width: 320px; /*marquee width */
height: 100px; /*marquee height */
background-color: #9A7CB8;
overflow: hidden;
}

And the code for the CSS Tooltip

a.info{
    position:relative; /*this is the key*/
    z-index:24; 
}

a.info:hover{z-index:1000000; background-color: #9A7CB8}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:5em; width:200px;
    border:1px solid #ffffff;
    padding: 5px;
    z-index: 999999999;
    background-color:#D4C1DD; color:#000;
    overflow:visible;
    text-align: left
}

And finally the code in the page:

<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">
<div class="scrolling_links">
<ul>
<li><a href="link_url" class=\"info\">Job Title (displayed on the page)<span>The tooltip text</span></a></li>
</ul>
</div>
</div>
</div>

Any help would be appreciated!

[stickmus]

try position:absolute on a.info

[stickmus]

Having looked at it that's not going to work. CSS looks a bit complicated to fuck around with, but basically everything in the marquee container needs to be positioned in relation to this.

[stealthcow]

i think its just the case of the tooltip being contained within a div that hides anything that doesnt fit in the box, and as a result, the tooltip will get hidden if its outside the divs area

simple enough to see the problem, but not as simple finding a solution..

[stickmus]

Seing as you're relying on javascript anyway, why not code it up using a bit of script?