Forum Moderators: not2easy

Message Too Old, No Replies

tooltip visible inside div with overflow hidden?

         

JohnnyDoomo

5:19 am on Sep 16, 2010 (gmt 0)

10+ Year Member



I am trying to tweak a news script. It has news titles and when you mouseover those titles they give a css tooltip box with a brief description.

I have the div that contains all the news titles with an overflow: hidden. The problem is, when you mouseover the titles and it shows the tooltip, the tooltip is following the same boundaries.

I want the tooltip to not follow these boundaries, so that it will look correct.

I've tested all types of things, but nothing seems to work. Surely this is possible, right? I just can't get it to work for the life of me.

Any help would be greatly appreciated.

My tooltip css looks like this:


.feeditem a:link, .feeditem a:visited {
position: relative;
z-index: 24;
text-decoration: none;
color: #000;
outline: none;
}

.feeditem a:hover {
z-index: 25;
background: #eee;
color: #666;
outline: none;
}

.feeditem a span {
display: none;
}

.feeditem a:hover span {
display: block;
position: absolute;
top: 2em;
left: 2em;
width: 300px;
border: 1px solid #ccc;
padding: 5px;
background-color: #eee;
color: #000;
font-family: Arial;
font-size: 10pt;
outline: none;
}

milosevic

8:20 am on Sep 16, 2010 (gmt 0)

10+ Year Member



If the below doesn't work, can you paste some more code with the HTML and any other CSS too?

What I would suggest is:

Put each <a> inside a container div (so there is only one <a> in each div) and give that div relative position to set a new zero point for absolute positioning in each case.

JohnnyDoomo

4:34 am on Sep 19, 2010 (gmt 0)

10+ Year Member



Putting a div around the <a> doesn't seem to help. Probably because of the way the tooltip css code is found within the <a> code.

Here's a look at the code generating the tooltip.


<li class="feeditem">
<?=$row['new']?><a href="<?=$row['permalink']?>" target=_new><?=$row['title']?><span><?=$row['desc']?></span></a>
</li>


With the way these tooltips are being created, is it still going to be possible to correct the way they function, when they are within a <div> that contains the css overflow: hidden?

Thanks for any more help you can still provide.