CSS

Tooltipps anzeigen

(msc) Tooltipps sind kleine Informationsfenster, die automatisch erscheinen, wenn man mit der Maus für eine gewisse Zeit auf ein Objekt zeigt. Sie erklären bei Programmen die Funktionen von Schaltflächen oder anderen Bedienelementen.

Nun kann man solche Tooltipps auch auf Webseiten einsetzen, um Informationen einzublenden, wenn der Anwender mit der Maus auf ein Element zeigt. Solche Tooltipps werden häufig über ein JavaScript dargestellt. Es ist aber auch möglich, nur mit Hilfe von CSS diese Informationen darzustellen. Dazu verwendet man folgende CSS-Deklarationen:

a:hover span {display: block !important; position: absolute; top: 5px; left: 40px; width:150px; border: 1px solid #f00; background-color: yellow; color: black; padding: 3px; font-size: .8em; z-index: 1;}
a span {display: none;}
a:hover {font-size: 100%;}
p a { position: relative; text-decoration:none}

Wir arbeiten hier mit einem Inline-Element (span), das innerhalb eines Verweises (a) gesetzt wird. Das span-Element ist normalerweise unsichtbar (display:none). Nur wenn mit der Maus darauf gezeigt und ein so genanntes Hover-Ereignis ausgelöst wird, blendet der Browser das span-Element ein: display:block !important;. Mit dem Zusatz important! stellen wir sicher, dass die Anzeigeart block die vorherige Angabe display:none aushebelt.

Nun ist es ausserdem wichtig, dass der Tooltipp an der richtigen Position erscheint – nämlich an der Stelle des Mauszeigers in einem Kästchen, das den restlichen Text überdeckt.

Das erreichen wir durch die Angaben position:absolute; und die Positionierung mittels top, left und width. Damit die absolute Positionierung von a:hover span nicht dazu führt, dass der Tooltipp immer in der linken oberen Ecke der Seite erscheint, definieren wir die Position des übergeordneten Elements p a als relativ (position: relative).

Das wars schon. Im HTML-Code definieren wir den Tooltipp dann wie folgt:

<a href="#">Publisher<span>Die führende Schweizer Fachzeitschrift für elektronisches Publizieren</span></a>

Der CSS-Tooltipp macht klar, was hinter einem Hyperlink steckt.