nicht angemeldet
Text scheint im Tooltip durch
Hi ihr,
ich verwende folgenden CSS-Code für meinen Tooltip:
/* Relativer Tooltip */
a.tooltip, a.tooltip:link, a.tooltip:visited, a.tooltip:active {
position: relative;
text-decoration: none;
font-style: italic;
color: #0000ff;
}
a.tooltip:hover {
color: #0000ff;
background: transparent;
}
a.tooltip span {
display: none;
text-decoration: none;
}
a.tooltip:hover span {
display: block;
position: absolute;
top: 20px;
left: 0;
width: 125px;
z-index: 100;
color: #000000;
border:1px solid #000000;
background: #FFFFCC;
font: 10px Verdana, sans-serif;
text-align: left;
}
Im HTML-Code wird der Tooltip wie folgt eingebaut:
<a class="tooltip" href="#">Tooltip <span>Und hier die Erklaerung zum Tooltip</span></a>
Wenn ich jetzt aber z.b. in einer Tabelle mehrere Zellen untereinander habe, die alle mit diesem Tooltip formatiert sind, erscheint zwar die gelbe Tooltipbox mit dem Text darin, er scheint aber auch die darunterliegende Zelle durch, wenn die Tooltipbox groß genug ist und auf die nächste Tabellenzeile reicht.
Hat jemand einen Tipp, wo ich das ändern kann?
mfg
Carsten
-
Hi,
a.tooltip:hover {
color: #0000ff;
background: transparent;
}hast du gedacht was passiert wenn du background: transparent; entfernst?
Gruss
Maulwurf
-
a.tooltip:hover {
color: #0000ff;
background: transparent;
}hast du gedacht was passiert wenn du background: transparent; entfernst?
Das hatte ich probiert. Da wird der Tooltip gar nicht mehr angezeigt.
mfg
Carsten
-
a.tooltip:hover {
color: #0000ff;
background: transparent;
}hast du gedacht was passiert wenn du background: transparent; entfernst?
Das hatte ich probiert. Da wird der Tooltip gar nicht mehr angezeigt.
Wahrscheinlich hätte ich dazuschreiben sollen, dass ich mit dem IE 6.x arbeite. Ich habe es jetzt mal mit dem Firefox 1.5.x probiert und der zeigt es korrekt an. Es erscheint kein Text im Tooltip durch.
mfg
Carsten
-
Hi,
ich habe es gerade im IE 6 probiert mit
a.tooltip:hover {
color: #0000ff;
background: transparent;
z-index:100;es klappt.
Gruss
Maulwurf
-
-
-
-
Hallo,
Wenn ich jetzt aber z.b. in einer Tabelle mehrere Zellen untereinander habe, die alle mit diesem Tooltip formatiert sind, erscheint zwar die gelbe Tooltipbox mit dem Text darin, er scheint aber auch die darunterliegende Zelle durch, wenn die Tooltipbox groß genug ist und auf die nächste Tabellenzeile reicht.
Kann es sein, dass es sich um das selbe Problem handelt, wie hier: http://forum.de.selfhtml.org/archiv/2006/5/t128781/?
Wie dort bereits gesagt, sehe ich keine Lösung im IE, die ohne HJavaScrupt auskommt, außer:
<table>
<tr>
<td title="Und hier die Erklaerung zum Tooltip"><a href="#">Tooltip</a></td>
</tr>
</table>viele Grüße
Axel
-
Hallo,
Kann es sein, dass es sich um das selbe Problem handelt, wie hier: http://forum.de.selfhtml.org/archiv/2006/5/t128781/?
Wie dort bereits gesagt, sehe ich keine Lösung im IE, die ohne HJavaScrupt auskommt, außer:
<table>
<tr>
<td title="Und hier die Erklaerung zum Tooltip"><a href="#">Tooltip</a></td>
</tr>
</table>Kommando zurück! Es geht doch ;-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Titel</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <style type="text/css"> <!-- td {width:50ex; border:1px solid black;} td a {display:block; width:100%; color:black;} td a span {display:none; background-color:yellow; border:1px solid green; width:30ex;} td a:hover {position:relative;} td a:hover span {display:block; position:absolute; top:1ex; left:5ex; } --> </style> </head> <body> <table> <tr> <td><a href="#">Linktext<span>Infotext zum Linktext<br>Zweizeilig</span></a></td> <td><a href="#">Linktext<span>Infotext zum Linktext<br>Zweizeilig</span></a></td> </tr> <tr> <td><a href="#">Linktext<span>Infotext zum Linktext<br>Zweizeilig</span></a></td> <td><a href="#">Linktext<span>Infotext zum Linktext<br>Zweizeilig</span></a></td> </tr> </table> </body> </html>Der Trick ist, die A-Elemente und die SPAN-Elemente solange wie möglich in position:static zu belassen und die position-Eigenschaft erst bei a:hover zu verändern.
viele Grüße
Axel
-