Re: tooltips using css in picture gallery are hidden by pictures

On 15 Jun 2008, Peter Müller <user (AT) example (DOT) net> wrote:

I have put my photos inside a table. Now I tried to add tooltip
displaying further information about the selected photo. No I hav the
problem that the shown tooltips are hidden by other photos of the
gallery. And therefore the tooltip is useless. Here is my style
definition:

a, .tipp {
position: relative;
}

a span, .tipp span {
display: none;
font: 11px arial,helvetica,sans-serif;
color: #000066;
}

a:hover, .tipp:hover {
background-color: white;
}


a:hover span, .tipp:hover span {
width: 300px;
position: absolute;
top: 30px;
left: 30px;
display: block;
background: #e6ecff;
border: 1px solid #003399;
text-decoration: none;
padding: 3px;
opacity: 1;
filter: alpha(opacity=100);
}


My pictures are displayed by something like:

table
tr
td align="left" valign="top"
a href="page-0001.html" class="tooltip"><span
class="info"><table>...</table></span
img src="thumbs/thumbnail-0001.jpg" alt="Feuerwand" border="0"
width="150" height="112"></a

/td><td align="left" valign="top"
a href="page-0127.html" class="tooltip"><span
class="info"><table>...</table></span><img
src="thumbs/thumbnail-0127.jpg" alt="Rotes Ende" border="0"
width="150" height="112"></a
...

Geez, bro...

span class="info"><table>...</table></span

You may wish to rethink your markup.

As for the tooltip-hidden problem, it probably can be corrected with the
css z-index rule.

--
Neredbojias
http://www.neredbojias.net/
Great sights and sounds