Pagina principala » UI / UX » Creează Tooltips Miniaturi în CSS Pure cu Wenk

    Creează Tooltips Miniaturi în CSS Pure cu Wenk

    Cu un nume ciudat, nu te-ai aștepta prea mult Wenk, un liber CSS bibliotecă tooltip. Totuși, este una dintre cele mai mici biblioteci puteți obține măsurarea sub 1KB când este gzipată.

    Wenk folosește cu CSS pur cu date-* atribute a crea instrumente de prezentare live pe care le puteți restabili și poziționați după preferințele dvs. Mai presus de toate, este o bibliotecă complet gratuită cu cod sursă disponibilă pe GitHub.

    Aceste sfaturi ușoare sunt foarte simplu de adăugat pe site-ul dvs. Ai nevoie doar de ea Wenk.css fişier adăugat la antetul paginii, pe care le puteți descărca de pe repo GitHub.

    Sau ai putea chiar adăugați fișierul CDN care este găzduit pe CDN al GitHub. Iată codul pentru care:

      

    Sau, dacă sunteți un ventilator npm / bower puteți instala acest pachet de la terminal.

    Etichetele implicite pentru tooltip nu au date personalizate. Te-au lăsat selectați poziția și lățimea, dar trebuie să modificați manual CSS dacă doriți să fie decorate în mod diferit.

    De exemplu, este posibil să doriți să adăugați o săgeată CSS la sugestia de instrument care apare deasupra elementului de element de instrument. Acest lucru este destul de simplu de creat, dar va trebui să ștergeți foaia de stil Wenk găsiți clasa CSS exactă pentru a extinde.

    Iată un exemplu de unii codul implicit pentru sfaturile lui Wenk:

       Wenk la dreapta!  

    Pagina principală de destinație Wenk include demonstrații live pe care le puteți testa prin plasarea în mișcare. Acestea sunt instrumentele de bază cele mai de bază veți obține, dar ele sunt perfecte pentru o bibliotecă care cântărește mai puțin de un kilobyte.

    Un lucru important trebuie luat în considerare suport pentru browser. Toate versiunile Chrome și Firefox ar trebui să funcționeze bine. Același lucru cu Opera 12+ și Opera Mini v8 +. Dar IE8 și IE10 par să aveți probleme redând aceste sfaturi. Din fericire, cota lor de piata scade rapid, dar este ceva de luat in seama inainte de utilizare.

    Sunt încă uimită cât de mult puteți face cu atât de puține KB. Biblioteca Wenk este o dovadă a dezvoltării moderne a frontendurilor și arată că un pic poate merge mult.

    Puteți săpeți prin întreaga sursă pe GitHub, împreună cu demonstrații live și fragmente de cod pentru a configura și a crea aceste sfaturi pentru site-ul dvs..