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 { position: relative; z-index : 24; color : #000; text-decoration: none; cursor: help; }

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

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.

<p>PHP ist eine tolle <a href="#" class="tt">Programmiersprache <span> ...mit der sich leistungsstarke Webapplikationen schnell und einfach entwickeln lassen</span></a>.</p>

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.