24 Tooltipp-Scripts

Werbung

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.

Weitere Beiträge:

Über Sven Lennartz

Sven ist der Erfinder des Dr. Web Magazins, Autor und Herausgeber verschiedener Fachbücher. Als Webdesigner und Texter früher freiberuflich für verschiedene Unternehmen und Verlage tätig. Jetzt Geschäftsführer der Smashing Media GmbH.

, , , , , , ,

32 Kommentare zu 24 Tooltipp-Scripts

  1. Sebastian 28. Mai 2007 at 21:46 #

    Einige der Tooltipps gab es doch bereits schon bei Dr. Web.

    Die ersten beiden gefallen mir wirklich gut.

  2. Hannes 29. Mai 2007 at 00:22 #

    Leider fehlt noch das wunderbare mootools, welches auch eine Tooltip-Klasse beinhaltet.

  3. Matthias 29. Mai 2007 at 12:10 #

    Setze seit einer Weile auf overLIB und komme damit echt gut zurecht und hab noch keine Problemberichte bekommen.

  4. Pete 2. Juni 2007 at 15:49 #

    Funktioniert auch wenn Javascript deaktiviert ist – CSS onMouseover Tooltip/Popup. Very nice… :D

  5. Jack Turner 3. Juni 2007 at 17:30 #

    You left out my favorite tooltipper. This is incredibly small and uses protype and scriptaculous.

  6. Matthias 15. Juni 2007 at 08:18 #

    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…

  7. Sven Lennartz 15. Juni 2007 at 19:13 #

    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

  8. Wolf-Dieter 27. November 2007 at 14:06 #

    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.

  9. Matteo 16. Februar 2009 at 15:54 #

    Hi,
    useful list!
    I suggest this link too:

    http://pupunzi.wordpress.com/2009/02/07/mbtooltip/

  10. Karl-Heinz 11. Dezember 2009 at 02:25 #

    Tolles Thema, eröffnet andere Blickrichtungen!

  11. Uwe 1. November 2010 at 10:19 #

    Hilffeeeee,
    wie kann ich ALT-Text bei Bildern machen?? Gibt es dafür ein Programm? Oder muß ich das unbedingt im code machen??

Trackbacks

  1. MacTVs Blog » Mini-PopUps - 29. Mai 2007

    [...] Wege um die sogenannten Mini-PopUps / Tooltips / Help-Balloons in Webseiten einzubauen, hat das Dr.Web Blog zusammen [...]

  2. » Links vom 29. Mai 2007 - oO Gedankenblase Oo - 29. Mai 2007

    [...] Dr. Web schreibt über 24 Tooltip Scripts, die sehr nützlich sein können, für eine differenzierte Linkansicht [...]

  3. Prinzzess`Allerlei - 29. Mai 2007

    Tooltip-Scripts…

  4. rtauchnitz.de » Blog Archive » Frisch gewongt am 29.05.07 - 29. Mai 2007

    [...] 24 Tooltipp-Scripts | Dr. Web Weblog: Eine Sammlung von Tooltip-Scripten [...]

  5. links for 2007-05-30 « Mandarine - 30. Mai 2007

    [...] 24 Tooltipp-Scripts | Dr. Web Weblog (tags: ajax html inspiration javascript links useful webdesign webdev) [...]

  6. diskostu sagt… links for 2007-05-30 - 30. Mai 2007

    [...] 24 Tooltipp-Scripts – Dr. Web Weblog Tipps, wie man Link-Tooltipps per CSS oder JavaScript umsetzt (tags: linkliste javascript webentwicklung CSS HTML) · Gelesen: 1 · heute: 1 [...]

  7. freaky.be » links for 2007-05-30 - 30. Mai 2007

    [...] 24 Tooltipp-Scripts | Dr. Web Weblog 24 tooltip scripts, could come in handy (tags: tools webdesign) [...]

  8. More boring stuff from the Net :|»Boringest :| - Moolah!!! - 31. Mai 2007

    [...] 24 Tooltipp-Scripts | Dr. Web Weblog would you guys like this on SARA? (tags: webdesign) [...]

  9. links for 2007-05-31 | Endl.de | Zielpublikum Weblog - 1. Juni 2007

    [...] 24 Tooltipp-Scripts | Dr. Web Weblog (tags: design deutsch tools webdesign) [...]

  10. zuckerbrot » Blog Archive » links for 2007-06-01 - 1. Juni 2007

    [...] 24 Tooltipp-Scripts | Dr. Web Weblog via zielpublikum.de [...]

  11. links for 2007-06-03 | Patrick Kempf - 3. Juni 2007

    [...] 24 Tooltipp-Scripts | Dr. Web Weblog (tags: tooltip scripts webdesign css) No Tags Gelesen: 2 / heute: 2 [...]

  12. datenschmutz.net - 3. Juni 2007

    Blogistan-Panoptikum Woche 22 2k7…

    Yigg.de bekommt eine Finanzspritze, mit AdShopping bietet ein weiterer Text-Werbungs Broker seine Dienste an, Geeks zeigen ihre Zuneigung mit einem eindeutigen T-Shirt, Ebay kauft StumbleUpon und die Gewinner des Digg Flash-API Contests stehen fest -…

  13. Interface Design und Usability Blog · Linktipp: Tooltipps - 4. Juni 2007

    [...] http://www.drweb.de/weblog/weblog/?p=847 Als Lesezeichen speichern bei: Diese Icons verzweigen auf soziale Netzwerke bei denen Nutzer [...]

  14. Fatih Hayrioğlu’nun not defteri » 05 Haziran 2007 Web’den Seçme Haberler - 5. Juni 2007

    [...] 24 tooltip scripti. Link [...]

  15. noch-ein-weblog.de - 12. Juni 2007

    Tool-Tip-Lösung gefällig…

    Lösungen, einen Tool-Tip auf seiner Seite zu integrieren gibt es viele. Eine Sammlung der verschiedensten Methoden findet sich bei DocWeb…
    Zur Liste
    Ich selbst setze overlib ein (–>). Aber mal was anderes wär ja auch nicht schlecht&#82…

  16. Prinzzess`Allerlei » Tooltip-Scripts - 15. Juli 2007

    [...] Praktische Informationen über Tooltipps kann man bei Dr. Web finden.Tooltipps, quasi Mini-PopUps,  tauchen bei Mouseover eines Links auf und sind verschieden darstellbar.Am besten gefallen mir die, die wie Sprechblasen aussehen… … Weitersagen .yiggbutton { float:left; padding:3px 5px 5px 5px; } yigg_url = ‘http://www.prinzzess.biz/2007/05/29/tooltip-scripts/'; Info: Tooltip-Scripts ist Beitrag Nr. 1199 Autor: prinzzess am Dienstag, den 29. Mai 2007| 12:19 Uhr Gelesen: 139heute: 4zuletzt: Samstag, 14. Juli 2007 – 22:54 Kategorie: ° Blog-Schule, Blox und Co., PC und inter-net, Wissens-wert | wong it!· Kommentarfeed-RSS 2.0 – Trackback· [...]

  17. Simple Tooltips « Code Eazy - 30. September 2007

    [...] and was looking around. I looked a number of open-source options (see 40 tooltip scripts here and 20 here) and one commercial library. I liked the functionality however each of them was 7, 8, 10 or 25 KB [...]

  18. My List: CSS Tooltips / Ajax Tooltips | David Bisset: Web Designer, Coder, Wordpress Guru - 22. November 2007

    [...] 24 Tooltipp-Scripts [...]

  19. 20 frische AJAX- und Javascripts | Javascript | Dr. Web Weblog - 21. August 2008

    [...] 24 Tooltipp-Scripts [...]

  20. Einblenden eines Bildes - php.de - 23. Februar 2009

    [...] Soetwas? jQuery Tooltip Plugin Demo 24 Tooltipp-Scripts Tooltips per JavaScript / DHTML __________________ Allianz Ästimation: Wir insistieren: [...]

  21. Tooltip langsam einblenden lassen - jswelt - Forum (Javascript, PHP, MySQL, AJAX, Webdesign) - 28. Februar 2009

    [...] nett hier unter Punkt 5 ein weiteres Beispiel. Und vielleicht weitere Anregung in dieser Sammlung: 24 Tooltipp-Scripts Learn to say before you [...]

Hinterlasse eine Antwort

Bitte bei weiteren Kommentaren per Email benarichtigen! Auch möglich: Abo ohne Kommentar.

Spam protection by WP Captcha-Free