Nützliche Tooltips-Tutorials und jQuery-Plugins

Der Tooltip ist ein gängiges Element der grafischen Benutzeroberfläche. Es wird in Verbindung mit einem Cursor verwendet, normalerweise einem Mauszeiger. Der Benutzer bewegt den Mauszeiger über ein Element, ohne darauf zu klicken, und möglicherweise wird ein Tooltip angezeigt – ein kleines „Hover-Feld“ mit Informationen über das Element, über das der Mauszeiger bewegt wird.

Ich habe einige Tutorials und jQuery-Plugins für Tooltips zusammengestellt.

1. TinyTips – Leichtes jQuery-Plugin für Tooltips

TinyTips ist ein sehr leichtes jQuery-Plug-in, das die Möglichkeit bietet, Tooltips zu so ziemlich jedem Element auf einer Seite hinzuzufügen. Gründlich dokumentiert und Designer-freundlich.

2. Foto-Tagging im Flickr-Stil mit jQuery

jQuery Photo Tagger kommt auf etwa 1.000 Codezeilen. Daher können Sie sich entweder die Projektseite ansehen oder die Online-Demo selbst ausprobieren. Bitte beachten Sie, dass Sie beim Klicken mit der Maus die STRG-Taste gedrückt halten müssen, um einen Hotspot zu erstellen.

Demo | Download

3. TipTip Benutzerdefiniertes Tooltip-jQuery-Plugin mit null Bildern

TipTip verwendet das title-Attribut genauso wie der Tooltip des nativen Browsers. Bei der Verwendung von TipTip wird jedoch der Titel kopiert und dann aus dem Element entfernt, sodass der Browser-Tooltip nicht angezeigt wird.
TipTip generiert nur einen Satz Popup-Elemente insgesamt, anstatt einen Satz Popup-Elemente für jedes Element zu generieren, auf das TipTip angewendet wird. Dies hilft, die Dinge zu beschleunigen und die Bearbeitungszeit zu verkürzen. Die generierten Elemente sind alle div-Elemente und werden an das Ende des body-Elements angehängt.

4. Wie man die neuen visuellen Anmerkungen mit CSS3 erstellt

ZURB hat uns beigebracht, wie man die neuen visuellen Anmerkungen erstellt. Die Lösung war technisch nicht zu komplex. Mit Notable haben sie das Konzept der Graceful Degradation angenommen: Sie nutzen neue CSS-Techniken, die eine saubere Degradation zu älteren Browsern ermöglichen.

Demo

5. Zeigen Sie Ihre Links als Dropdown-Liste mit Pluralink an

Pluralink ist ein erstaunliches Javascript-Plugin, um mehrere Links in Ihrem Text anzuordnen.

6. Graustufen-Hover-Effekt mit CSS & jQuery

Graustufen-Hover-Effekt mit CSS & jQuery setzt auf CSS-Sprites und ein paar Zeilen jQuery, erfordert aber ein wenig Vorbereitung, bevor er implementiert werden kann. Es wird nicht für große Projekte empfohlen und ist wahrscheinlich am besten für die Präsentation von Portfoliostücken geeignet.

7. Werfen Sie einen genaueren Blick mit dem AnythingZoomer jQuery-Plugin

Sie haben eine kleine Fläche. Fahren Sie mit der Maus darüber. Ein Bereich erscheint, der Ihnen einen näheren Einblick gibt. Dies ist ein jQuery-Plugin, das dies tut. Ich werde Ihnen nicht sagen, wofür Sie es verwenden sollten, oder Anwendungsszenarien ausarbeiten. Ihre eigene Kreativität kann Ihnen dabei helfen.

Demo

8. Erstellen Sie einen inhaltsreichen Tooltip mit JSON und jQuery

Dieses Tutorial zeigt, wie Sie QuickInfos erstellen, die von jQuery unterstützt werden, mit Informationen, die aus einem JSON-Array abgerufen werden.

Demo

9. Ersetzen Sie Ihren Standard-Tooltip durch Pretty (mb)Tooltip

(mb)Tooltip ist ein schöner Tooltip für Ihre Webseite in jQuery.

Download

10. Captify zeigt hübsche Bildunterschriften an, die beim Überfahren erscheinen

Captify ist ein Plugin für jQuery, das von Brian Reavis geschrieben wurde, um einfache, hübsche Bildunterschriften anzuzeigen, die bei einem Rollover erscheinen. Es wurde auf Firefox, Chrome, Safari und dem elenden Internet Explorer getestet. Captify wurde von ImageCaptions inspiriert, einem weiteren jQuery-Plug-in zum Anzeigen von Untertiteln wie diesen.

11. Vorschaubilder mit dem imgPreview jQuery Plugin

Peter Higgins hat Dojo Zoomer erstellt. Es ist in 3 Tafeln unterteilt. Wenn Sie den Mauszeiger über das Bild im linken Bereich bewegen, zeigt der rechte Bereich dynamisch den zugeschnittenen Teil des Bildes an, sodass Sie sich explizit auf den Teil des Hauptbildes konzentrieren können, der Sie interessiert.

12. jQuery Javascript Image Magnifier unter GPL

JQZoom ist eine JavaScript-Bildlupe, die an der Spitze des beliebten jQuery-Javascript-Frameworks erstellt wurde. jQzoom ist ein großartiges und wirklich einfach zu verwendendes Skript, um das zu vergrößern, was Sie möchten.

13. Einfache transparente Tooltips mit jQuery und CSS

CSS-Tooltips sind im modernen Webdesign sehr beliebt und entgegen der landläufigen Meinung ist es wirklich einfach, sie zu erstellen, insbesondere mit einem der allseits beliebten Javascript-Frameworks.

Demo

14. Magic Toolbox – Javascript- und Flash-Bildzoom-Tools

Magic Toolbox hat 2 erstaunliche Javascript-Zoom-Tools für Bilder erstellt ( Magic Zoom und Magic Magnify ). Magic Zoom ist ein JavaScript-Zoom-Tool. Es ist der beste Weg, Bilder mit unglaublichen Details anzuzeigen.

15. Prototip 2 – Erstellen Sie mit Leichtigkeit schöne Tooltips

Mit Prototip können Sie mit dem Prototype-Javascript-Framework auf einfache Weise sowohl einfache als auch komplexe Tooltips erstellen.

Demo

16. Einfachster Tooltip und Bildvorschau mit jQuery

Einfachster Tooltip und Bildvorschau ist eines dieser Tooltip-ähnlichen Blasen-Popups, die angezeigt werden, wenn Sie mit der Maus über einen Link oder ein Miniaturbild fahren.

Demo

17. Popup-Blasen-Tooltips im Coda-Stil mit jQuery

Coda ist eines der neuen Webentwicklungstools für den Mac – und bei Designern und Entwicklern beliebt.

18. Taggify Anklickbarer Bildbereich zeigt Popup-Tooltip

Taggify ist ein Web-Widget, mit dem Blogger und Publisher ihre Websites verbessern können, indem sie Bild-Tooltips hinzufügen, die mit den Anforderungen bestimmter Bilder verknüpft sind.
Demo

19. Unauffällige Bubble Tooltips mit Javascript und CSS

Blasen-Tooltips sind eine einfache Möglichkeit, (mit ein wenig CSS und Javascript) ausgefallene Tooltips mit einer Sprechblasenform zu jeder Webseite hinzuzufügen.

Demo

20. Tooltips für Prototype und Scriptaculous ein- und ausblenden

CoolTips ist eine leichtgewichtige, unaufdringliche Technik zum Ersetzen von QuickInfos in JavaScript-Webbrowsern.
CoolTips wird verwendet, um herkömmliche Webbrowser-Tooltips zu ersetzen. Die Tooltips erhalten den Inhalt des Titelattributs, sodass sie völlig unauffällig sind. CoolTips ist eine OO-Klasse, die auf den Frameworks Prototype JS und script.aculo.us basiert.

21. Transparente und verblassende Tooltips für süße Titel

Sweet Titles Fading Topipps ist weder ein Abklatsch von NICE Titles noch versucht es, Dunstans überarbeiteten Versuch zu verbessern. Und es ist definitiv nicht von einem dieser Event-Handler-verseuchten Skripts von Dynamic Drive gerippt worden.

Demo

22. Prototip Kurzinfos zu den meisten Funktionen für Prototypen

Mit Prototip können Sie mit dem Prototype-Javascript-Framework auf einfache Weise sowohl einfache als auch komplexe Tooltips erstellen. Wenn Sie auch Scriptaculous verwenden, können Sie ihnen sogar einige nette Effekte hinzufügen.

Demo

23. Leichte Tooltips für BoxOver DHTML/Javascript

BoxOver verwendet Javascript / DHTML, um Tooltips auf einer Website anzuzeigen. Die Implementierung der Tooltips erfordert jedoch keine Kenntnisse in DHTML oder Javascript. Es gibt viele Optimierungen, die eingestellt werden können, um es an Ihre Bedürfnisse anzupassen, indem Sie das „Titel“-Attribut eines Tags festlegen.