Fügen Sie einfache Image-Tooltip-Labels mit Taggd hinzu

Sie wissen, wie Facebook Sie dazu bringt Beschriftungsflächen in fotos? Gut, Taggd ist irgendwie wie das CSS / JS-Äquivalent Verwenden von Punkten zum Notieren wo Tooltips auf einem Bild erscheinen sollen.

Die Bibliothek ist völlig kostenlos und erfordert keine Abhängigkeiten wie jQuery. Es läuft auf reinem Vanille-JavaScript, und es ist super einfach einzurichten.

Sie können ein wenig mehr von der Taggd-Homepage erfahren enthält eine Demo und einige grundlegende Schritte für den Einstieg.

Es gibt auch einen Link zum Online-Dokumentation mit Doclets, einer hübschen kleinen Web-App für JS-Dokumentation. Sie können Suche nach Taggd-Versionen, oder Durchsuchen Sie die aktuelle Version in der Meisterbranche.

Von dort bekommen Sie eine riesige Liste von Eigenschaften Sie können verwenden. Jedes Dokument wird nach Funktionen aufgeteilt das Bild bearbeiten (sowie Tag hinzufügen() oder getTag ()) gefolgt von Funktionen, die Ihnen helfen bestimmte Tags bearbeiten (sowie Position setzen()).

Wieder alles läuft auf Vanille-JavaScript Sie müssen sich also nicht um Syntaxprobleme kümmern.

Um anzufangen Schauen Sie sich das GitHub-Repo an, und folgen Sie den Installationsanweisungen.

Sie fügen einfach die Taggd-CSS- und JS-Dateien hinzu in dein Sektion , und dann Erstellen Sie eine neue Instanz der Taggd-Elemente. Diese können definiert werden Einer nach dem anderen oder in einem Array.

Dann Hängen Sie sie an ein Bild an, und presto! Du bist bereit zu gehen.

Ich würde gerne sehen Zusätzliche Funktionen zum Anpassen der Tag-Labels, und ändern ihre Form. Es wäre fantastisch, ein quadratisches Tag zu erstellen, das ein Objekt umgibt, und nicht einen kleinen rosa Punkt. Aber für eine freie Bibliothek mit null Abhängigkeiten kann ich mich nicht viel beschweren.

Bisher wurde diese Bibliothek erstellt nur für moderne Browser, und unterstützt keine anmutige Degradation. Sie können jedoch immer ein Problem auf der Reposeite öffnen oder versuchen, andere Probleme zu lösen, wenn Sie ein einfaches Problem sehen. Trotzdem ist Taggd immer noch ein echtes Plugin und praktisch für jedes Projekt.

Schauen Sie sich die Homepage des Autors an Beispielcode und DL-Links zusammen mit einem Link zur Dokumentationsseite.

Wenn Sie Fragen oder Anregungen haben, können Sie dem Ersteller Tim Severien auf Twitter @ TimSeverien eine Nachricht senden.