Tooltip
Tooltip on pieni tekstilaatikko, joka ilmestyy, kun hiiri viedään elementin päälle tai elementti saa näppäimistöfokuksen. Se kertoo lyhyesti, mikä painike tai kuvake on. Suomeksi sitä kutsutaan joskus työkaluvihjeeksi tai vihjetekstiksi.
Suomenkielisiä vaihtoehtoja ovat työkaluvihje ja vihjeteksti, mutta suunnittelijat ja kehittäjät sanovat lähes aina tooltip. Nimi tulee työpöytäohjelmien työkalupalkeista, joissa kuvakkeen päälle viety hiiri näytti työkalun nimen.
Verkkosivulla tooltip nimeää tavallisesti pelkällä kuvakkeella varustetun painikkeen tai avaa lyhenteen. Jos tieto on välttämätön lomakkeen täyttämiseen, sen paikka on sivulla eikä tooltipissä.
Miksi tooltip ei näy puhelimella?
Kosketusnäytöllä ei ole hover-tilaa. Pelkästään hiireen reagoiva tooltip jää siis mobiilissa kokonaan näkymättä. HTML:n title-attribuutissa on sama vika pahempana: se ei näy fokuksella eikä kosketuksella, eikä sitä voi muotoilla.
Kun sisältöön tarvitaan linkki tai painike, kyse on jo popoverista. Se avataan klikkaamalla, ja HTML:n popover-attribuutti hoitaa avaamisen ja sulkemisen nykyään ilman omaa JavaScriptiä.
Lyhyt viive ennen avautumista estää tooltipien välkkymisen, kun hiiri vain ohittaa työkalupalkin. Tooltip sijoitetaan yleensä painikkeen yläpuolelle ja käännetään toiselle puolelle, jos tila loppuu kesken. CSS:n anchor positioning hoitaa sijoittelun sitä tukevissa selaimissa, muuten käytetään kirjastoa kuten Floating UI.
Saavutettava tooltip
- Näytä tooltip myös näppäimistöfokuksella.
- Anna tooltip-elementille role=tooltip ja id, ja viittaa siihen painikkeen aria-describedby-attribuutilla. Silloin ruudunlukija lukee tekstin painikkeen yhteydessä.
- Sulje tooltip Esc-näppäimellä siirtämättä fokusta.
- Pidä tooltip auki, kun hiiri siirtyy painikkeelta sen päälle.
Kaksi viimeistä tulevat WCAG 2.1:n onnistumiskriteeristä 1.4.13 (Content on Hover or Focus, AA-taso). Kriteerin mukaan hoverilla tai fokuksella avautuvan sisällön pitää olla suljettavissa, sen päälle pitää voida viedä hiiri ja sen pitää pysyä näkyvissä, kunnes käyttäjä sulkee sen tai siirtyy pois. Julkisen sektorin sivustoilta Suomen laki edellyttää AA-tasoa, joten kriteeri ei ole vapaaehtoinen.
Teksti kannattaa pitää muutaman sanan mittaisena. Jos tooltipiin tarvitaan toinen virke, painike tarvitsee todennäköisesti näkyvän tekstin.
Liittyvät termit
- SaavutettavuusSaavutettavuus tarkoittaa, että verkkosivustoa tai sovellusta voi käyttää mahdollisimman moni, myös ruudunlukijalla tai pelkällä näppäimistöllä. Saavutettavuutta mitataan WCAG-ohjeiden kriteereillä, ja osaa palveluista se koskee lain nojalla.
- Alt tekstiAlt-teksti on kuvalle kirjoitettu lyhyt tekstivastine, jonka ruudunlukija lukee ääneen ja jonka selain näyttää, jos kuva ei lataudu. Se kirjoitetaan HTML:n img-elementin alt-attribuuttiin. Hyvä alt-teksti kertoo, mitä kuva tarkoittaa juuri siinä kohdassa sivua.
- AvainkehysAvainkehys (keyframe) on animaation kohta, jossa elementin tila, kuten sijainti, koko tai läpinäkyvyys, määritellään tarkasti. Ohjelma tai selain laskee välissä olevat kehykset itse. CSS:ssä avainkehykset kirjoitetaan @keyframes-sääntöön.