Tippy.js - Bibliotecă ușoară de la Vanilla Javascript Tooltip

Seturile de instrumente sunt utile pentru afișarea unor biți de conținut suplimentar. Acestea economisesc spațiu pe pagină și vă oferă o cameră pentru a anima ceva care atrage atenția oamenilor.

În trecut, am acoperit scripturi de tip tooltip, dar mulți dezvoltatori doresc biblioteci personalizate. Unii preferă jQuery, alții doresc vanilie JS simplu.

Pluginul Tippy funcționează cel mai bine pentru ultimul grup care doresc să lucreze cu codul JS de vanilie.

Cu Tippy.js primiți a complet bibliotecă de instrumentetip care rulează pe partea de sus a Popper.js. Aceasta înseamnă că pluginul are o mică dependență, dar este mult mai ușor de gestionat decât biblioteca jQuery.

Deci, care este frumusețea lui Tippy? Se adaugă pe stilurile Popper implicite pentru a crea instrumentele dinamice mai dinamice cu efecte incredibile.

Aveți posibilitatea să adăugați decolorări, diapozitive, vrăjitoare, durate personalizate, metode de apel invers și chiar și efecte dinamice, cum ar fi sfaturi de rotire automată.

Într-adevăr acest plug-in va lua sfaturi de până la un nivel complet nou cu caracteristici de utilizare bine definite. Poti sa pastrezi vârfurile de instrumente fixate pe ecran cu anumite elemente de pagină, sau să le modificați orientarea în cazul în care ecranul devine prea mic.

De asemenea, acceptă dispozitive touch, ceea ce face ca acest lucru să fie perfect pentru planuri receptive. Modelul HTML al instrumentului este etichetat folosind standardele ARIA pentru accesibilitate maximă. Nu mă pot gândi la nimic rău de spus despre acest plugin!

Dacă doriți să încercați acest lucru în propriul dvs. site, descărcați o copie a codului sursă de la GitHub. Acestea includ fișierele principale de plugin-uri, împreună cu detalii despre cum să le instalați folosind npm.

Fișierul script Tippy.js implicit este livrat împreună cu Popper.js, astfel încât nici măcar să nu mai descărcați acea bibliotecă suplimentară. Tot ce aveți nevoie este fișierul implicit JS / CSS și o pagină web pentru a rula sfaturi.

Dacă doriți să explorați mai multe exemple, aruncați o privire la pagina de pornire Tippy.js care include eșantioane live + fragmente de cod pe care le puteți copia și reutiliza.