UPDATE: Eine neue cross-browserfähige Version dieses Scriptes könnt ihr hier finden: Ein einfacher Cross-Browser Tooltip mit JavaScript und CSS.
Heute möchte ich euch zeigen wie man mit wenig JavaScript sehr ansprechende Tooltips erstellen kann, die sich beliebig mit CSS formatieren lassen und deren Inhalt man mit HTML gestalten kann. Bei anderen im Netz erhältlichen Tooltip Scripten sind dafür häufig viele Zeilen Code notwendig. Ich habe jedoch versucht den Code so gering wie möglich zu halten. Worauf außerdem Wert gelegt werden sollte, ist die volle Funktionalität sowohl im Internet Explorer als auch im Mozilla. Und nicht zu vergessen eine hohe Ausführgeschwindigkeit!
Für den Tooltip benötigter HTML Code
Wir nehmen an, dass wir auf unserer Seite einen Link haben bei dem ein Tooltip erscheinen soll, wenn jemand mit der Maus darüber fährt. Wie ein Link aussieht weiß sicher jeder:
Ein Link
Den Tooltip selber definieren wir irgendwo auf der Seite, indem wir ein <div>
Element erstellen und dieses mit Text füllen:
Mehr lesenWirklich einfache JavaScript Tooltips