12. Juli 2009 von Dieter | 3 Kommentare | drucken
Kurzinfos mit Fancy Tooltips aufgepeppt
Mit dem title-Attribut – nicht zu verwechseln mit dem title-Element im Header für den Titel der Webseite – werden Kurzinfos (Tooltips) erzeugt, wenn Du mit dem Mauszeiger (Cursor) über das entsprechende Element (Link, Bild etc) kommst. Diese Kurzinfos (Tooltips) sind eine Box mit dünnen schwarzem Rahmen, hellgelbem Hintergrund und schwarzer Schrift.
Leider kann man dieses title-Attribut nicht einfach mit Cascading Style Sheets (CSS) gestalten. 
Mithilfe eines JavaScripts geht es aber doch, sofern der Besucher einen Browser verwendet der JavaScript unterstützt und es aktiviert ist.
Das Ergebnis: CSS-Tooltips. 
Auf die Idee meine Tooltips entsprechend aufzupeppen, brachten mich übrigens die gelungenen Webseiten von Thomas Scholz (aka Toscho) und Gabi mit ihrem BLOGhäuschen, die solche CSS-Tooltips einsetzen. Danke!
Realisiert habe ich die CSS-Tooltips mit Fancy Tooltips. Dort gibt es die Dateien einschließlich des WordPress-Plugins zum Herunterladen (Download).
Ich habe es jedoch vorgezogen, den CSS-Code in meine CSS-Datei und den JavaScript-Code in ein bereits bestehendes JavaScript zu integrieren. Der Vorteil ist, dass dann keine zusätzlichen HTTP-Anfragen (HTTP-Requests) benötigt werden und die Seiten sich dadurch weiterhin schnell laden und aufbauen.
Wie findet Ihr die CSS-Tooltips? Gut oder eine überflüssige Spielerei?
Infos
Webseite veröffentlicht am Sonntag, den 12. Juli 2009, um 23:51 Uhr, zuletzt geändert am Samstag, den 21. November 2009, um 14:26 Uhr.
Kategorie: Webdesign
Schlagworte: CSS, Fancy Tooltips, JavaScript, Plugin, Plugins, Tooltips, WordPress
Statistik: 259 Blogbeiträge, 682 Schlagworte, 1.553 Kommentare, 109 Feedleser
1. Ute
Kommentar vom 17. Juli 2009 um 21:38
Ich mag die hübschen Tooltipps,
auch wenn ich selbst bisher noch immer den Standard nutze… 
2. Kurz und gut XXII Linktippsmiradlo bloggt
Pingback vom 18. Juli 2009 um 02:28
[...] Statt langweiliger Standardtooltipps wie hier, lassen die sich auch aufmotzen, Dieter schreibt über die JS-Tooltipps [...]
3. Dieter
Kommentar vom 18. Juli 2009 um 12:58
@Ute
Danke für Deine Rückmeldung.
Freut mich, dass Du sie magst.
Der Einbau war übrigens einfacher als ich vermutet hatte.