Tippy.js - lengvas vanilės „Javascript Tooltip“ biblioteka

Įrankių patarimai yra naudingi norint parodyti mažai papildomo turinio bitų. Jie taupo erdvę puslapyje ir suteikia jums erdvės, kad būtų galima animuoti kažką, kas griebtų žmonių dėmesį.

Anksčiau mes aptarėme įrankių scenarijų scenarijus, tačiau daugelis kūrėjų pageidauja, kad būtų sukurtos individualios bibliotekos. Kai kurie nori JQuery, kiti nori paprasto vanilės JS.

Tippy įskiepis geriausiai tinka pastarajai grupei kurie nori dirbti su vanilės JS kodu.

Su Tippy.js gausite visiškai veikianti įrankių bibliotekos biblioteka veikia „Popper.js“ viršuje. Tai reiškia, kad „plugin“ priklauso nedidelė priklausomybė, tačiau tai yra daug lengviau valdyti nei „jQuery“ biblioteka.

Taigi, kas yra Tippy grožis? Ji prideda prie numatytųjų „Popper“ stilių, kuriuos norite sukurti dinamiškesni įrankiai su neįtikėtinu poveikiu.

Jūs galite pridėti išnykimo, skaidres, wiggles, pasirinktines trukmes, atgalinio ryšio metodus ir net dinaminius efektus, pvz., Automatinius sukimosi įrankius.

Tikrai šis įskiepis užpildys jūsų įrankių patarimus iki visiškai naujo lygio su gerai apibrėžtomis naudojimo funkcijomis. Galite laikyti įrankių patarimai, pritvirtinti prie ekrano su tam tikrais puslapio elementais, arba pakeisti juos, jei ekranas tampa per mažas.

Jis taip pat palaiko jutiklinius įrenginius, todėl tai puikiai tinka atsakingiems išdėstymams. „Tooltip HTML“ yra pažymėtas naudojant ARIA standartus, kad būtų užtikrintas maksimalus prieinamumas. Aš negaliu galvoti apie ką nors blogo pasakyti apie šį papildinį!

Jei norite pabandyti tai savo svetainėje, tiesiog atsisiųskite iš GitHub šaltinio kodo kopiją. Tai apima pagrindinius „plugin“ failus ir išsamią informaciją apie tai, kaip ją įdiegti naudojant „npm“.

Numatytasis „Tippy.js“ scenarijaus failas pateikiamas kartu su „Popper.js“, todėl jums nereikia atsisiųsti papildomos bibliotekos. Viskas, ko jums reikia, yra numatytasis JS / CSS failas ir žiniatinklio puslapis, skirtas įrankių patarimams paleisti.

Jei norite įdėti daugiau pavyzdžių, pažiūrėkite į „Tippy.js“ pagrindinį puslapį, kuriame yra gyvi pavyzdžiai + kodo fragmentai, kuriuos galite kopijuoti ir pakartotinai naudoti.