Barrierefreie Webseiten

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.

Barrierefreie Webseiten | Version 1.5 alpha | 2005-07-27