Informationen sind das A und O jedes Internetportals, leider ist aber oftmals nicht genug Platz um alle wichtigen Informationen sofort anzuzeigen oder es gibt Infos die zweitrangig sind und beispielsweise nur angezeigt werden wenn man mit der Maus über ein bestimmtes Icon fährt.

Javascript Tooltips:

Es gibt dafür diverse JavaScript Lösungen, die eleganteste davon ist wahrscheinlich Prototip ein Addon für Prototype, ich persönliche finde diese Javascriptlösungen ein wenig unschön.

Es geht auch einfacher – Tooltips mit CSS

Eine wie ich finde, sehr elegante Lösung die ich auch regelmäßig nutze sieht folgendermaßen aus:

HTML Grundgerüst:

<a href="#hint" class="tooltip">
<img src="fragezeichen.gif" />
<span class="info">Informationen die erst beim überfahren der Maus angezeigt werden</span>
</a>

Die CSS-Datei

a.tooltip {text-decoration:none;}
.tooltip span.info{display:none;}
.tooltip:hover span.info{display:block;position:absolute; width:200px; height:200px;}

Es wird also einfach nur ein Link erstellt, der die Klasse “tooltip” zugewiesen bekommt und einen Span-Tag mit der Klasse “info” bekommt.
Per CSS wird jetzt definiert, dass der Span unsichtbar ist und erst wenn man mit der Maus über den Link sichtbar wird. Mit position:absolute; bewirkt man, dass der Span aus dem normalen Fluss gelöst wird und als Tooltip über der Seite schwebt.
Dann noch ein wenig Höhe, Breite und Farben anpassen und man hat relativ einfach einen sehr praktischen Effekt umgesetzt.

Weitere Möglichkeiten: 40 Scripts für Tooltips