oktató videó - tanfolyam

A magyarázó buborék tippek időnként nagyon hasznosak és a HTML is ad rá lehetőséget, de azért az nem tökéletes megoldás.

A microtip egy sokkal szebb, testreszabhatóbb és pillanatok alatt beüzemelhető tooltip.

Az alábbi CSS szükséges csak:

https://unpkg.com/microtip/microtip.css

Persze le is tölthető vagy NPM-mel telepíthető (npm install microtip).

A használata nagyon egyszerű, bármely HTML elem esetén:

<button aria-label="Ez lesz a buborékban" role="tooltip">ez egy gomb</button>

Vagyis meg kell adni legalább az aria-label és a role tulajdonságokat.

Ezen kívül megadható a data-microtip-position is, amellyel szabályozható, hogy hol jelenjen meg:

<button aria-label="Ez lesz a buborékban" role="tooltip" data-microtip-position="top-right">ez egy gomb</button>

A pozíció lehetséges értékei:

top, top-left, top-right, bottom, bottom-left, bottom-right, left, right

fent, fent-balra, fent-jobbra, lent, lent-balra, lent-jobbra, bal, jobb

A mérete is beállítható: data-microtip-size

<button aria-label="Ez lesz a buborékban" role="tooltip" data-microtip-position="top-right" data-microtip-size="large">ez egy gomb</button>

Lehetséges értékei:

small, medium, large and fit

kicsi, közepes, nagy, automatikus




Érdekel a webfejlesztés? Kattints ide oktató videókért!