Tooltips sind großartig, es gibt einfach keine Leugnung. Sie bieten eine einfache, vorhersagbare und unkomplizierte Möglichkeit, Ihren Benutzern nützliche, kontextsensitive Informationen zur Verfügung zu stellen.
Wir sind uns alle einig, wie groß die Tooltips sind, aber wie wir sie umsetzen, kann sich dramatisch unterscheiden. Wenn Sie auf der Suche nach Tooltip-Ideen für Ihr aktuelles Projekt sind, sind Sie hier genau richtig. Wir haben unglaubliche 25 verschiedene Optionen, die in zwei Kategorien fallen: JavaScript und CSS. Egal welche Methode Sie verwenden möchten, wir haben die besten verfügbaren Techniken, die Sie möglicherweise mithilfe von OOP-Klassentechniken wie JavaScript-Klassen mithilfe der JS ++ - Programmiersprache von Roger Poon verbessern möchten.
JavaScript & jQuery
Gekippt - Der jQuery-Tooltip
Lassen wir die Idee, das Beste für den Schluss zu sparen, aus. Wenn Sie nicht fünfundzwanzig verschiedene Optionen durchsuchen und herausfinden möchten, welche am besten ist, laden Sie einfach Tipped herunter. Die Tooltips sind attraktiv, einfach zu implementieren und es stehen unzählige Optionen zur Auswahl. Sie werden eine harte Zeit haben, dieses zu toppen.
Opentip - Der kostenlose Tooltip
Opentip ist ein weiteres erstklassiges Tooltip-Plugin. Wie bei Tipped gibt es unzählige Optionen, mit denen Sie so ziemlich alles machen können, was Sie möchten. Das Design der Tips selbst zeigt etwas mehr Charakter als das für Tipped, was für Ihr Projekt möglicherweise eine gute Sache ist oder nicht.
Javascript Tooltip
Einfach aber effektiv. Dieser bietet Ihnen Positionierungsoptionen, ermöglicht das Einbetten von Bildern und kann durch verschiedene Ereignisse ausgelöst werden.
SkinnyTip-JavaScript-Tooltip-Bibliothek
Dies ist nicht die attraktivste Option, aber es ist ziemlich leicht. Die gesamte Bibliothek umfasst weniger als 10 KB, sodass Sie sich keine Sorgen darüber machen müssen, dass Ihre Seite langsamer wird. Es wirkt zwar etwas uralt, aber es funktioniert immer noch.
qTip - Das jQuery-Tooltip-Plugin
qTip funktioniert in allen gängigen Browsern und lässt sich leicht abbauen, wenn JavaScript deaktiviert ist, leicht positioniert werden kann und Animationen und abgerundete Ecken bietet. Es ist ein wirklich solides Plugin und ich empfehle Ihnen dringend, es auszuprobieren. Schauen Sie sich auch Version 2 an.
Simpletip - Ein einfaches jQuery-Tooltip-Plugin
Simpletip ist genau wie angekündigt. Es sieht nicht nur einfach aus, es ist auch sehr einfach zu bedienen. Es gibt auch einige visuelle Ladeeffekte, die Sie nutzen können, wenn Sie weitere Schritte unternehmen möchten.
Tooltipster - Das jQuery-Tooltip-Plugin
Lösen Sie die Plugins, die es seit Netscape gibt. Tooltipster ist ein modernes, HTML5-gültiges, großartiges Tooltip-Plugin. Es ist leicht, schnell, browserfreundlich und mit CSS einfach zu gestalten.
Tooltip - jQuery-Benutzeroberfläche
jQuery-Benutzer müssen nicht weit gehen, um großartige, robuste Tooltipps zu finden, sie sind direkt in die jQuery-Benutzeroberfläche integriert. Sie sind wirklich simpel und die Wahrscheinlichkeit, dass Sie eine Menge anderes Zeug in der Bibliothek finden, das Ihre Website verbessern wird.
TipTipp jQuery Plugin
Ich liebe alles, was Drew Wilson tut. Er ist der Typ hinter Screeny, Space Box, Pictos und vielen anderen coolen Sachen. Die Tatsache, dass er dieses Plugin erstellt hat, reicht aus, um es herunterzuladen. Mit weniger als 3,5 kb ist dieses Ding superleicht und super erstaunlich.
Tooltipsy
Tooltipsy legt die Funktionalität in die Hände von JavaScript und verwendet dann klares, einfach anpassbares CSS für alles andere. Ändern Sie das Aussehen, die Größe und die Animation. verrückt und mach es dir selbst.
Beschwipst
Tipsy gibt Ihnen minimale und stilvolle Tooltips ohne viel Flusen. Es verfügt über alle Funktionen, die Sie benötigen, wie Positionieren und Überblenden, und nichts Überflüssiges, das Sie niemals verwenden werden.
Responsiver und mobilfreundlicher Tooltip
Dies ist ein Tooltip für die nächste Generation von Webdesign. Es passt sich problemlos an jedes Ansichtsfenster jeder Größe an und zeigt den Tooltip auf intelligente Weise in einer für den aktuellen Bildschirm optimierten Größe und Position an. Wenn Sie responsives Design erstellen, sollten Sie sich mit responsiven Tooltipps befassen.
aToolTip - Ein einfacher jQuery-Tooltip von Ara Abcarians
Mit aToolTip können Sie einen Tooltip erhalten, der sich ständig mit dem Cursor bewegt oder über dem Partnerelement bleibt. Es hat Hover- oder Klick-Optionen, ist unter 4kb und verfügt über Rückruffunktionen.
Colortip - ein jQuery-Tooltip-Plugin
Das Herunterladen eines vorgefertigten Tooltip-Plugins ist cool, aber warum sollten Sie nicht den Sprung machen und lernen, eines zu bauen? Colortip ist ein kostenloser Download, aber es ist Teil eines ausführlichen, schrittweisen Tutorials zum Erstellen des Plugins von Grund auf.
ChillTip jQuery Plug-In
ChillTip ist ein bemerkenswert flexibles Tooltip-Plugin, mit dem Sie die Tipps auf verschiedene Arten implementieren können. Es kann mit span-, img-, Ankerattributen verwendet werden und so ziemlich alles andere, das das title-Attribut verwendet.
Pop! Einfache Pop-Menüs mit jQuery
Das ist nicht ziemlich ein Tooltip, aber es hängt eng zusammen, also dachte ich, ich würde es trotzdem hinzufügen. Anstatt ein kurzes Popup-Fenster aufzurufen, können Sie ein kleines anklickbares Dropdown-Menü anzeigen, in dem Sie zusätzliche Informationen ausblenden können.
CSS-Tooltips
CSS-Tooltips
Um den CSS-Tooltip-Abschnitt zu starten, wenden wir uns an Master-Entwickler David Walsh. Dieses Tutorial konzentriert sich mehr auf das Erstellen der klassischen Tooltip-Form mit CSS und weniger auf die erfolgreiche Implementierung und reine CSS-Tooltip.
CSS-Tooltip
Dies ist ein wirklich tolles Tool, mit dem Sie ganz einfach reine CSS-Tooltips erstellen können, indem Sie einfach ein paar Felder ausfüllen. Sie können das Erscheinungsbild und den Inhalt mithilfe des einfachen Formulars vollständig anpassen, dann den Code übernehmen und in Ihr Projekt einfügen.
Sexy Tooltips mit nur CSS
Ein schönes Tutorial zu Six Revisionen für die Erstellung wirklich robuster und attraktiver Tooltips mit CSS. Der Stil ist eine Art Warndialog mit Symbol und farbigem Feld.
CSS-Tooltip
Ein einfacher, schlanker, Browserübergreifender, reiner CSS-Tooltip. Es ist ein kostenloser Download und beansprucht nur eine einzige knifflige KB.
CSS-Bubble-Tooltips
Ein einfacher sprudelnder CSS-Tooltip. Nicht viel hier, aber es funktioniert gut!
Einfacher CSS-Tooltip
Dieses heißt? Easy CSS Tooltip? aus einem Grund. Es dauert vier Zeilen Code: eine Zeile HTML und drei Zeilen CSS. Das ist es! Es wird nicht viel einfacher, Leute.
CSS-Tooltips und Sprechblasen
In diesem Artikel experimentiert Konigi mit zwei verschiedenen Methoden, um reine CSS-Tooltips bereitzustellen. Der erste verwendet den Titel und der zweite eine Spanne.
CSS Tooltips von Adam Whitcroft
Hier lehrt Sie Adam Whitcroft, Tooltips mit Datenattributen zu erstellen. Das hört sich vielleicht etwas beängstigend an, aber sie sind wirklich einfach zu bedienen. Lesen Sie dieses unbedingt durch.
Reine CSS-Tooltipps - Trezy.com
Hier legt der Autor solide Ziele wie IE8-Kompatibilität und minimales HTML fest und zeigt Ihnen, wie er einige reine CSS-Tooltips erstellt hat, die diese Ziele erfüllen. Wenn Sie einen CSS-Tooltip benötigen, der in einer professionellen Browserumgebung verwendet werden kann, ist dies eine gute Lektüre.
Was verwenden Sie für QuickInfos?
Nachdem Sie diese fünfundzwanzig Tooltip-Ressourcen gesehen haben, ist es an der Zeit, rauszugehen und Tooltips zu erstellen! Hinterlassen Sie einen Kommentar und teilen Sie uns mit, welche Ressource Ihnen am besten gefällt oder ob Sie eine gefunden haben, die oben nicht aufgeführt wurde.