Tooltipps, also Mini-PopUps, beherrscht jeder halbwegs moderne Browser. Das “title”-Attribut genügt. Aber es reicht nicht immer. Scriptgesteuert lässt sich mehr draus machen – manchmal reicht auch CSS. Solche Tooltipps können dem Design angepasst werden, anders funktioniert und mehr Informationen aufnehmen. Dazu gehören formatierter Text, URLs, Bilder, Tabellen. Lösungen mit Hilfe von Javascript gibt es bereits sehr lange, doch kreative Tüftler gewinnen der Angelegenheit immer wieder neue Facetten ab. Und schließlich hat auch AJAX Einzug gehalten. Diese Quellen sollte man zur Verfügung haben:
Kleine Hinweise: Tipp schreibt sich im Englischen “Tip”, die Schreibweisen mischen sich hier. Die Grafiken sind anklickbar.
- Unobtrusive and Slightly Accessible CSS Tool Tips on Semi Transparent CSS Menus
Ein halbtransparenter Tooltipp mit Schatten.
- jTip – A jQuery Tool Tip
Hübsch aufwändige AJAX Tooltipps mit allem Drum und Dran.
- AJAX-enabled Help-Balloons
Hilfefenster im Ballon-Design. Es gibt sie auch in einer ajaxifizierten Version.
- Tooltipps mit CSS und Javascript
Tooltipps in verschiedenen Ausführungen. Ein Tutorial von Frank Rohse. Dr. Web Artikel
- qTip
Funktioniert mit allen Elementen, nicht nur mit Hyperlinks, und in vielen Browsern, nämlich IE 5.5+, Firefox, Safari und Opera.
- BoxOver
Flexibler DHTML-Tooltipp in verschiedenen Formen. Erscheint
sofort, mit Verzögerung, bei Klick oder blendet sich sanft ein.
- SuperNotes
Wandelt Fußnoten in Mini-PopUps um. Erscheint sofort oder kann dauerhaft festgepinnt werden. Läuft in vielen Browsern.
- DHTMLGoodies kennt 5 Tooltippvarianten
Variante 1 verbessert Formulare:
- Variante 2 nutzt AJAX
- Walter Zorns JavaScript, DHTML Tooltipps
sind vielfältig einsetzbar und gut dokumentiert. Auch mit deutschsprachiger Anleitung.
- overLIB
Die Javascript-Bibliothek erlaubt vielfältige Positionierungen und Erscheinungsformen.
- Tooltip.js
Tooltipps mit AJAX. Nutzt das Prototype JavaScript Framework. Die dazugehörige Demo funktioniert nicht mehr. - Sweet Titles
JavaScript Fading Tooltips. - Nice Titles
Ein schon älterer Klassiker. Nutzt ein Hintergrundbild.
- lixlpixel Javascript Tooltips
Aus der gleichen Quellen stammen auch diese CSS Tooltipps.
- WP – Bubble Tooltips (Plugin)
Ein WordPress-Plugin von Frank Bültge, verändert alle Links. Mit deutschsprachiger Anleitung. Basiert auf den Bubble Tooltipps von Web-Graphics.
- FancyTooltips
Ebenfalls auch als WordPress-Plugin zu haben.
- jQuery plugin: Tooltip
Erweitert die jQuery Bibliothek.
- Pure CSS Tooltips
Ohne Script-Einsatz. Nicht schön, aber möglich. - Information Balloon PopUps
Stu Nicholls Arbeit kommt ohne Script aus.
- Animated Tooltip Javascript
Wer’s braucht: dieser Tooltipp wächst ins Bild. - A lightweight prototype based JavaScript tooltip
von Jonathan Weiss - DOM Tooltip
Script-Library - Yahoo! UI Library: Tooltip
Auch Yahoos Baukasten für Web-Entwickler beschäftigt sich mit Tooltipps.
Weitere Beiträge:
- 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
- Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
- Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
- Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
- Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
- 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
- Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.
Loading ...
Einige der Tooltipps gab es doch bereits schon bei Dr. Web.
Die ersten beiden gefallen mir wirklich gut.
Leider fehlt noch das wunderbare mootools, welches auch eine Tooltip-Klasse beinhaltet.
Setze seit einer Weile auf overLIB und komme damit echt gut zurecht und hab noch keine Problemberichte bekommen.
Funktioniert auch wenn Javascript deaktiviert ist – CSS onMouseover Tooltip/Popup. Very nice…
You left out my favorite tooltipper. This is incredibly small and uses protype and scriptaculous.
Plagiat?
Mir ist schon häufiger aufgefallen, dass eure Website gerne mal Artikel von dem Smashing Magazine übersetzt und dann 1:1 übernimmt, ohne einen Hinweis auf den Urheber anzugeben.
Habt ihr es wirklich notwendig, euren inhalt auf diese unverschämte weise von anderen Websites zu stehlen? Ich denke nicht, dass das Übersetzen und anschließentliche Veröffentlichen unter eigenem Namen gutes Wissenschaftliches Arbeiten ist…
matthias:
smashing magazine ist mein blog, ebenso wie dieses. die beiträge hier werden für ein internationales publikum aufbereitet. also erst gucken oder fragen bevor man “stehlen” ruft.
zum nachgucken: About
Die gezeigten Tooltips sind wirklich appetitlich.
Aber man sollte darauf hinweisen, dass sie nicht überstrapaziert werden. Also nur dort, wo sie absolut sinnvoll und notwendig sind.
Hintergrund: beim Lesen fahre ich mit der Maus über den Text — weil ich mich dann leichter Konzentrieren kann. Wenn dann ein Tooltip unvermutet aufspringt, ärgere ich mich eher als dass ich mich freue.
Hi,
useful list!
I suggest this link too:
http://pupunzi.wordpress.com/2009/02/07/mbtooltip/
Tolles Thema, eröffnet andere Blickrichtungen!
Hilffeeeee,
wie kann ich ALT-Text bei Bildern machen?? Gibt es dafür ein Programm? Oder muß ich das unbedingt im code machen??