Case studies: von Fall zu Fall
Fallbeispiel 3: Tooltipps mit CSS
Tooltipps, die beim Darüberfahren mit der Maus erscheinen, sind eine schöne und vor allem anwenderfreundliche Sache. Meistens werden sie durch den Einsatz von Javascript umgesetzt - sie lassen sich aber auch mit reinem CSS erzeugen.
a.tt:hover { z-index: 25; background-color: #EBEFFC; text-decoration : none; }
a.tt span { display: none }
a.tt:hover span { display: block; position: absolute; top: 2em; left: 2em; width: 17em; border: 1px solid #707070; background-color: #fffacd; color: #000000; text-align: left; padding: 2px; font-size: 11px; text-decoration: none; }
Tooltipps mit CSS - das Stylesheet
Die Idee bei diesem Ansatz besteht darin, für Tooltipp-Links das Attribut "relative" zu verwenden, damit ein zwischen den <a>-Tags platziertes <span>-Element korrekt zum Tooltipp dargestellt werden kann. Diese Methode funktioniert im Internet Explorer ab Version 5.5, Mozilla und Netscape.
Tooltipps mit CSS - das Ergebnis
Definiert man nun zwei Style-Sets (einen für die Bildschirm- und einen für die Druckerausgabe), dann lassen sich die Tooltipps auch in ansprechender Forma zu Papier bringen. Im IE funktionieren die Attribute :before und :after leider nicht (sie werden ignoriert). Andere Browser dagegen können davon Gebrauch machen und die Tooltipps beispielsweise geklammert ausgeben.