Tippy.js - Könnyű Vanilla Javascript Tooltip könyvtár

Az eszköztippek hasznosak, ha kis mennyiségű extra tartalmat jelenítenek meg. Megtakarítanak helyet az oldalon, és teret adnak arra, hogy animáljon valamit, ami megragadja az emberek figyelmét.

A múltban a tooltip szkriptekre is kiterjedt, de sok fejlesztő egyedi könyvtárakat szeretne. Néhányan a jQuery-t részesítik előnyben, mások egyszerű vanília JS-t akarnak.

A Tippy plugin a legjobban az utóbbi csoport számára működik akik vanília JS kóddal akarnak dolgozni.

A Tippy.js használatával a teljesen működőképes eszköztipp könyvtár a Popper.js tetején fut. Ez azt jelenti, hogy a bővítmény kis függőséggel rendelkezik, de sokkal könnyebb kezelni, mint a jQuery könyvtár.

Szóval mi a Tippy szépsége? Az alapértelmezett Popper stílusokhoz hozzáteszi dinamikusabb eszköztippek hihetetlen hatásokkal.

Fade, dia, wiggles, egyéni időtartamok, visszahívási módszerek és még dinamikus effektek, például az automatikus forgatás eszköztippjei is hozzáadhatók.

Tényleg ez a bővítmény teljesen új szintre teszi a szerszámtáblákat, jól definiált használhatósági jellemzőkkel. Megtarthatod bizonyos oldalelemekkel a képernyőre rögzített eszköztippek, vagy változtassa meg azokat, ha a képernyő túl kicsi.

Támogatja az érintő eszközöket is, amelyek tökéletesen alkalmasak az érzékeny elrendezésekre. Az eszköztipp HTML-t a maximális hozzáférhetőség érdekében ARIA szabványokkal jelöljük. Nem tudok semmit rosszul mondani erről a bővítményről!

Ha ezt a saját webhelyén szeretné kipróbálni, csak töltse le a forráskód másolatát a GitHub-tól. Ez magában foglalja a fő plugin-fájlokat, valamint az npm segítségével történő telepítés részleteit.

Az alapértelmezett Tippy.js szkriptfájl a Popper.js csomagot tartalmazza, így nem kell még letöltenie az extra könyvtárat. Mindössze annyit kell tennie, hogy az alapértelmezett JS / CSS fájl és egy weboldalt kell futtatnia az eszköztippek megjelenítéséhez.

Ha további példákba szeretné ásni, tekintse meg a Tippy.js kezdőlapját, amely élő mintákat és kódrészleteket tartalmaz, amelyeket másolhat és újra felhasználhat.