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. Wenn auch nachfolgend der Begriff "Info-Fenster" verwendet wird, so sei darauf hingewiesen, dass es sich dabei nicht um ein eigenes Browserfenster, sondern vielmehr um eine "Box" handelt, die beim Hovern erscheint.
Diesen Effekt kann man generell auch ohne CSS mit folgendem Quelltext erreichen Demo oben "Tooltipp ohne CSS":
<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.
Tooltipp mit eingeblendeter Grafik
Anstelle eines erscheinenden Textes kann mann natürlich auch eine Grafik einblenden. Zu diesem Zweck muss man a.info:hover span eine Hintergrundgrafik sowie einen Breiten- und Höhenwert entsprechend dieser Grafik zuweisen.
Als Beispiel hier die modifizierten Angaben, wie in der dritten Demo zu sehen.
a.info:hover span
{
display:block;
position:absolute;
top:-60px;
left:300px;
width:234px;
height: 60px;
background: url(grafik.jpg);
}