Tippy.js - kerge vanilla Javascript Tooltip raamatukogu

Tooltips on kasulik, et näidata väikeseid lisamaterjale. Nad säästavad leheküljel ruumi ja annavad teile ruumi, et elustada midagi, mis haarab inimeste tähelepanu.

Varem oleme käsitlenud tööriista skripte, kuid paljud arendajad soovivad kohandatud raamatukogusid. Mõned eelistavad jQueryt, teised soovivad lihtsat vanilla JS-i.

Tippy plugin töötab viimati nimetatud grupi jaoks kõige paremini kes soovivad töötada vanilli JS koodiga.

Tippy.js'iga saate a täielikult toimiv töövihikraamatukogu töötab Popper.js'i peal. See tähendab, et pistikprogrammil on väike sõltuvus, kuid seda on palju lihtsam hallata kui jQuery raamatukogu.

Mis siis on Tippy ilu? See lisab loodavatele Popperi stiilidele vaikimisi dünaamilisemaid tööriistu uskumatu mõjuga.

Saate lisada kaovad, slaidid, peegeldused, kohandatud kestused, tagasihelistamismeetodid ja isegi dünaamilised efektid, nagu näiteks automaatne pööramine..

Tõesti see plugin võtab teie tööriista täiesti uuele tasemele, millel on hästi määratletud kasutatavuse funktsioonid. Sa võid hoida teatud lehtelementidega ekraani külge kinnitatud tööriista, või muutke orientatsiooni, kui ekraan muutub liiga väikeseks.

Samuti toetab see puutetundlikke seadmeid, mis muudavad selle ideaalseks paigutuseks. Tooltip HTML on märgistatud, kasutades maksimaalset kättesaadavust ARIA standarditega. Ma ei saa selle plugina kohta midagi halba öelda!

Kui sa tahad seda oma saidil proovida, siis allalaadige ainult lähtekoodi koopia GitHubist. See hõlmab peamisi pluginafaile koos üksikasjadega, kuidas seda npm-i abil installida.

Vaikimisi on Tippy.js-i skriptifail kaasas Popper.js, nii et te ei pea seda täiendavat raamatukogu alla laadima. Kõik, mida vajame, on vaikimisi kasutatav JS / CSS-fail ja veebileht, mis käivitab tööriista.

Kui soovite mõnedes näidetes kaevata, vaadake Tippy.js'i kodulehte, mis sisaldab live-proove + koodilõike, mida saate kopeerida ja taaskasutada.