CSS značka attr() nam omogoča, da določenemu nizu dodamo dodatno pojasnilo oz. opis. Običajno smo takšno funkcionalnost imenovali z besedo “tooltip”, prikaže pa se z prehodom miške na desktop računalniku ali klikom na mobilni napravi.

Na začetku smo takšne tooltip-e uporabljali kombinacije div in span polj z ustreznim CSSjem s katerimi smo oblikovali, prikazovali in skrivali dodatne opise. Dodaten opis je bil običajno del vsebine, le da smo ga skrili s pomočjo CSS značk. Primer takšne rešitve Tooltip Examples.

Nov način z uporabo attr() značke še vedno uporablja div in span polja, vendar dodatno besedilo skrijemo v npr. “aria-label” značko. To vsebino lahko potem preko značke attr() pokličemo in ustrezno prikažemo – content: attr(aria-label).

See the Pen
attr() in CSS by Ananya Neogi (@ananyaneogi)
on CodePen.

CSS media značka “attr()” je za vsebino dobro podprta v vseh večjih brskalnikih. Natančno stanje lahko preverite na “Can I use”.