Microtip - CSS Tooltip Biblioteca cu caracteristici de accesibilitate nativă

Puteți face o căutare rapidă pe GitHub pentru a găsi zeci de biblioteci personalizate de instrumente. Și se pare că noii oameni au lovit pe web în fiecare lună.

Microtip este o resursă unică, deoarece rulează pe instrumentele CSS pure, oferă o estetică personalizată și utilizează codul sursă care este pe deplin accesibil pentru toți utilizatorii.

Dacă nu v-ați gândit prea mult despre accesibilitate, atunci Microtip vă poate schimba mintea. Este amestecul perfect de design curat cu pentru toate dispozitivele, toate browserele și pentru utilizatorii cu deficiențe majore.

În pagina de pornire, veți găsi un link de descărcare la biblioteca Microtip împreună cu o grămadă de demonstrații de coduri.

Puteți obține această configurare printr-un manager de pachete, o descărcare directă sau trăgând-o direct dintr-un CDN. Aceasta vine cu un fișier CSS și asta este de fapt tot ce aveți nevoie.

După ce ați adăugat Microtip în pagina dvs., puteți începe să adăugați sfaturi despre instrucțiuni pe elementele de pagină. Acestea sunt pe deplin compatibile cu WAI astfel încât acestea să se conformeze perfect standardelor moderne de accesibilitate.

Iată un exemplu de cod de instrument cheie atașat la un element de buton cu o poziție personalizată:

Nu este corect codul?

Această bibliotecă este foarte ușoară, cu un total de 1KB minimificat. Asta e nebun, având în vedere cât de mult ajungi cu aceste sfaturi.

Proprietățile CSS personalizate pot fi transferate prin atributele HTML pentru a defini dimensiunea fontului, stilul de tranziție, relaxarea și multe alte setări.

Poti de asemenea suprascrieți direct CSS pentru a face mai mari instrumentele cu diferite culori sau fonturi.

Consultați secțiunea de personalizare din pagina principală pentru mai multe detalii. Totul ruleaza prin HTML si CSS, deci nu este nevoie orice cunoștințe de scripting pentru a obține acest lucru.

Microtip este super ușor de configurat și personalizat Deci, dacă cel puțin știți codificarea frontală de bază, veți fi bine.

Dar aruncați o privire la repo GitHub pentru mai multe informații de configurare și pentru a apuca o copie a foii de stil.

Dacă aveți întrebări sau sugestii pentru funcții noi, puteți să renunțați, de asemenea, la creatorul de pe Twitter @_ighosh.