07.01.2008
CSS Popup, CSS-Info-Fenster, Tooltip
Unter einem "Tooltip" versteht man ein kleines Info-Fenster, das sich beim Hovern öffnet und weitergehende Zusatzinformationen enthält.
Diesen Effekt kann man generell auch ohne CSS mit folgendem Quelltext erreichen (Demo):
<span title="Für einen Tooltip dieser Art sind keine CSS-Angaben erforderlich. Mit CSS lassen sich aber Schrift, Farben, Rahmen usw. individuell anpassen.">Tooltip ohne CSS</span>
Allerdings kann man mit CSS-Style-Angaben die Formatierung des Info-Fensters sehr vielfältig und individuell gestalten. Wie das obige Beispiel außerdem zeigt, ist ohne CSS zumindest im Firefox die Zeichenanzahl begrenzt.
Das folgende Beispiel für einen "CSS-Tooltip" stammt von psacke.com.
Der HTML-Code für den Text, bei dem sich ein Infofenster öffnen soll, bedient sich für den Zweck des Infofensters eines a-Links, der über die zugewiesene Klasse "info" per CSS formatiert wird:
<a class="info" href="#">Hier soll beim Drüberfahren ein Info-Fenster erscheinen <span>Hallo, ich bin ein Tooltip oder das CSS-Info-Popup-Fenster. Hier kannst du Infos reinschreiben</span></a>
Für das CSS-Info-Fenster benötigen wir insgesamt die folgenden vier Angaben:
a.info
{
position:relative;
z-index:1;
background-color:#ff0;
color:#2D006B;
text-decoration:none;
}
a.info:hover
{
z-index:2;
background-color:#C0FF3E;
}
a.info span
{
display: none;
}
a.info:hover span
{
display:block;
position:absolute;
top:2em;
left:2em;
width:15em;
border:1px solid #12127D;
background-color:#fc0;
color:#000;
text-align: center;
padding: 5px;
font-size: 0.8em;
}
Bei der Klasse a.info werden die Text- und Hintergrundformatierungen für den "normalen", per Infofenster dann zu erläuternden Text hinterlegt. position:relative; z-index:1; dienen dazu, das spätere Infofenster in Bezug zum Text zu positionieren.
a.info:hover definiert in diesem Fall die Hintergrundfarbe des normalen Textes beim Hovern. Die "z-index-Angabe" bewirkt, dass sich das spätere Infofenster eine Ebene über dem Ursprungstext einblendet.
"display: none;" bei a.info span verhindert, dass der hinterlegte Infotext außerhalb des Hover-Zustandes ersichtlich ist.
In a.info:hover span sind schließlich die Angaben für den Tooltip hinterlegt. Man kann ihn absolut zum Text positionieren, indem top- und left- Werte definiert werden. Ferner können hier die üblichen Formatierungsangaben für Breite, Farben, Schrift, Hintergrund und Rahmen eingetragen werden.
nach oben