Tooltip eli vihjeteksti on pieni, kontekstuaalinen infolaatikko, joka ilmestyy kun käyttäjä vie hiiren elementin päälle (hover) tai koskettaa sitä mobiilissa. Tooltip tarjoaa lyhyen selityksen, ohjeistuksen tai lisätietoa ilman että käyttäjän tarvitsee klikata tai siirtyä toiselle sivulle. Kun hiiri siirtyy pois tai käyttäjä koskettaa muualle, tooltip katoaa.
Tooltipien käyttötarkoitukset
Tooltip sopii selittämään epäselviä termejä, kuvakkeita tai toimintoja. Esimerkiksi ikonipainike, jossa on vain symboli, voi saada tooltipin “Tallenna muutokset”. Tai tekninen termi lomakkeessa voi saada selityksen: “IBAN-numero tarkoittaa kansainvälistä tilinumeroa”.
Pk-yrityksen sivustolla tooltip voi auttaa ymmärtämään hinnoittelua (“Mitä ‘perusasennus’ sisältää?”), teknisiä yksityiskohtia (“Mikä on SSL-sertifikaatti?”), tai ikonien merkityksiä sosiaalisessa mediassa. Tooltip tarjoaa vastauksen ilman että sivun layout täyttyy pitkillä selitysteksteillä.
Tooltip ei sovellu pitkiin teksteihin eikä kriittiseen informaatioon, joka kaikkien pitää nähdä. Se on lisäinformaatio niille, jotka sitä tarvitsevat — ei pääviesti.
Tooltipien parhaat käytännöt
Tooltipin tekstin pitää olla lyhyt — yksi lause tai pari sanaa. Jos tarvitset kappaleen tekstiä, tooltip ei ole oikea työkalu; käytä sen sijaan modaalia, accordionia tai laajenna sivun sisältöä.
Tooltipien pitää olla helposti luettavia: riittävä fonttikoko, hyvä kontrasti ja selkeä asemointi. Tooltip ei saa peittää elementtiä, josta se avautui, eikä ulottua näytön ulkopuolelle. Viisas tooltip mukautuu: jos tila oikealla puolella ei riitä, se avautuu vasemmalle.
Vältä tooltipeja mobiilissa, koska hover-toiminto ei toimi kosketusnäytöillä. Jos tooltip on välttämätön, toteuta se kosketus-klikkauksella, mutta muista että käyttäjä ei ehkä tiedä klikata — älä piilota kriittistä tietoa tooltip-taakse.
Tooltip vs. muut UI-elementit
Tooltip eroaa popoverista ja modaalista. Popover on suurempi ja voi sisältää enemmän sisältöä, interaktiivisia elementtejä (linkkejä, painikkeita) ja pysyy näkyvissä klikattuaan. Modal on vielä suurempi ja vaatii aktiivisen sulkemisen. Tooltip on näistä keveyin — passiivinen, lyhyt ja katoaa itsestään.
Tooltip eroaa myös placeholderista lomakekentissä. Placeholder on kentän sisällä oleva opasteteksti (“Syötä sähköpostiosoitteesi”), joka katoaa kun kirjoitat. Tooltip sen sijaan pysyy näkyvissä hover-toiminnon aikana.
Tooltipien saavutettavuus
Tooltipit ovat saavutettavuuden näkökulmasta haastavia. Ruudunlukija ei automaattisesti huomaa tooltipia, ellei sitä ole toteutettu oikein ARIA-attribuuteilla (aria-describedby tai aria-label). Näppäimistönavigaation pitää myös toimia: kun fokus siirtyy elementtiin Tab-näppäimellä, tooltipin pitäisi avautua.
Hyvä käytäntö on myös noudattaa prefers-reduced-motion -asetusta: jos käyttäjä on pyytänyt vähemmän liikettä, tooltipin avautuminen ja sulkeutuminen voivat olla välittömiä ilman fade-animaatiota.
Yhteenveto
Tooltip on pieni mutta hyödyllinen UI-elementti, joka tarjoaa kontekstuaalista apua juuri silloin kun sitä tarvitaan. Pk-yritykselle tooltip voi parantaa käyttökokemusta selittämällä epäselviä termejä ja ikoneja ilman että sivusta tulee tekstimassa. Kuitenkin tooltipin käyttö vaatii harkintaa: älä piilota kriittistä tietoa tooltip-taakse, älä käytä sitä pitkiin teksteihin ja varmista saavutettavuus. Hyvin käytettynä tooltip on hienovarainen apu — huonosti käytettynä se on vain lisää sekaannusta.