Microtip - CSS-Tooltip-Bibliothek mit nativen Eingabehilfen

Sie können eine schnelle Suche in GitHub durchführen, um Dutzende von benutzerdefinierten Tooltip-Bibliotheken zu finden. Und es scheint, als würden jeden Monat neue ins Netz gehen.

Microtip ist eine einzigartige Ressource, da sie auf reinen CSS-Tooltips ausgeführt wird, benutzerdefinierte Ästhetik bietet und Quellcode verwendet voll zugänglich für alle Benutzer.

Wenn Sie noch nie viel über die Zugänglichkeit nachgedacht haben, kann Microtip Ihre Meinung ändern. Es ist die perfekte Mischung aus klarem Design mit Funktionalität für alle Geräte, alle Browser und für Benutzer mit erheblichen Beeinträchtigungen.

Auf der Homepage finden Sie einen Download-Link zur Microtip-Bibliothek sowie eine Reihe von Code-Demos.

Sie können dieses Setup über einen Paketmanager, einen direkten Download oder direkt von einem CDN abrufen. Es kommt mit einer CSS-Datei und das ist im Grunde alles, was Sie brauchen.

Sobald Sie Microtip zu Ihrer Seite hinzugefügt haben, können Sie Tooltips zu Seitenelementen hinzufügen. Diese sind voll kompatibel mit der WAI so entsprechen sie perfekt den modernen barrierefreiheitsstandards.

Hier ist ein Beispiel-Tooltip-Code, der an ein Schaltflächenelement mit einer benutzerdefinierten Position angehängt ist:

Nicht viel Code richtig?

Diese Bibliothek ist mit insgesamt 1 KB minimiert. Das ist einfach verrückt, wenn man bedenkt, wie viel man mit diesen Tooltips bekommt.

Benutzerdefinierte CSS-Eigenschaften können durch HTML-Attribute übergeben werden, um die Schriftgröße, den Übergangsstil, die Beschleunigung und viele andere Einstellungen zu definieren.

Du kannst auch Überschreiben Sie das CSS direkt, um die QuickInfos zu vergrößern mit verschiedenen Farben oder Schriftarten.

Sehen Sie sich den Abschnitt zur Anpassung auf der Hauptseite an, um weitere Informationen zu erhalten. Alles läuft durch HTML und CSS, so dass Sie nicht brauchen irgendein Scripting-Wissen damit das funktioniert.

Microtip ist super einfach einzurichten und anzupassen Wenn Sie also zumindest die grundlegende Frontend-Codierung kennen, wird es Ihnen gut gehen.

Werfen Sie einen Blick auf das GitHub-Repo, um weitere Setup-Informationen zu erhalten und eine Kopie des Stylesheets zu erhalten.

Wenn Sie Fragen oder Vorschläge zu neuen Funktionen haben, können Sie auch eine Zeile an den Ersteller auf Twitter @_ighosh setzen.