Tooltip
Työkaluvihje toimintoon liittyvän lyhyen lisätiedon esittämiseen.
Julkaistu versiossa 5.1.0
Esikatselu
Käyttötarkoitus
Tooltip on työkaluvihje, jolla voidaan näyttää toimintoon tai elementtiin liittyvä kuvaus tai lisätieto. Tooltip ei estä taustalla olevan järjestelmän käyttöä, vaan asiakas voi jatkaa sivun selaamista tai tietojen täyttämistä, vaikka työkaluvihje olisi auki.
Tooltip on oletuksena piilotettu. Tooltip aukeaa, kun asiakas vie kursorin aktivoivan elementin päälle (hover) tai siirtää kohdistuksen elementtiin näppäimistön avulla. Aktivoiva elementti voi olla esimerkiksi kuvake, teksti tai painike. Tooltip sulkeutuu, kun kursori tai kohdistus siirretään muualle.
Tooltipistä on toteutettu myös versio, joka avautuu klikkaamalla (Popover). Klikattava työkaluvihje soveltuu myös kosketusnäytöille. Popover sulkeutuu, kun asiakas klikkaa muualle tai sulkee Popoverin sen kulmassa olevasta ruksista.
Tooltip-komponenttiin ei tule sijoittaa asiakkaan huomiota vaativaa tai kriittistä tietoa, sillä asiakas ei välttämättä osaa ennakoida, mikä komponentti avaa työkaluvihjeen tai minkälaista tietoa Tooltip sisältää.
Yleisesti käyttöliittymä tulisi aina suunnitella siten, että tarpeelliset tiedot ja termit on mahdollista ymmärtää myös ilman Tooltip-vihjeitä. Jos tieto on asiakkaan kannalta olennaista, pidä tieto aina näkyvillä tai käytä tiedon esittämiseen muuta avattavaa komponenttia (esim. Collapse tai Accordion ).
Tee näin
- Käytä Tooltip-komponenttia yksittäiseen toimintoon liittyvän ei-kriittisen lisätiedon, kuvauksen tai vihjeen esittämiseen.
- Pidä tekstisisällöt lyhyinä ja ytimekkäinä.
- Käytä klikattavaa Popover-versiota, jos työkaluvihjeen tulee toimia myös kosketusnäytöillä.
- Aseta Tooltip siten, ettei se avautuessaan peitä muuta oleellista sisältöä.
- Käytä työkaluvihjettä johdonmukaisesti kaikissa samankaltaisissa elementeissä (esim. taulukon kaikissa toimintokuvakkeissa).
- Käytä kuvakkeena käyttöliittymäkuvaketta.
Älä tee näin
- Älä sijoita Tooltippiin pitkiä tekstejä.
- Älä sijoita Tooltippiin asiakkaan kannalta olennaista tai kriittistä.
- Älä liitä työkaluvihjeeseen linkkejä tai muuta interaktiivista sisältöä.
- Älä asettele työkaluvihjettä siten, että se peittää alleen suoritettavan tai seuraavan toiminnon..
Saavutettavuus
Tooltipin sisältö on luettavissa ruudunlukijaohjelmistolla. Painike-elementti saa aria-describedby-attribuutin, jonka arvo on tooltip-elementin id.
Oletusversiossa, jossa Tooltip näytetään aktivoivan painikkeen hoverilla tai kohdistuksella, ruudunlukija lukee sisällön automaattisesti painikkeen tekstin jälkeen.
Popover-versiota käytettäessä ruudunlukija lukee ensin aria-expanded-attribuutin sekä kuvakkeelle määritettävissä olevan labelin (popoverIconLabel-property) arvot. Painikkeen aktivoinnin jälkeen ruudunlukija lukee Tooltipin sisällön.
Huomaa, että hover-toimintoa ei aina tueta kosketusnäytöillä, jonka vuoksi Tooltip ei kaikissa tapauksissa täytä kaikkia saavutettavuuskriteerejä.
Tooltip on suunniteltu ei-kriittisen lisätiedon esittämiseen. Lähtökohtaisesti kannattaa käyttää muita komponentteja tai esitystapoja, jos sisällön on oltava täysin saavutettavaa.
Hoverilla tai kohdistuksella avautuva Tooltip (oletus)
Käytä hoverilla tai kohdistuksella aktivoituvaa Tooltippiä ensisijaisesti sellaisten interaktiivisten elementtien kanssa, jotka sisältävät jonkin toiminnon ja jotka ovat kohdistettavissa (esim. linkki, painike tai input). Muita elementtejä (div, span, tms.) käytettäessä tulee varmistaa, että elementtiin voi viedä kohdistuksen lisäämällä siihen attribuutti tabindex="0".
Huomioi, että Tooltip-komponenttia ei voi hyödyntää kosketusnäytöillä. Oletustoiminnallisuudella Tooltip on yhdenmukaisesti käytettävissä vain desktop-selaimilla, sillä hoverilla tai kohdistuksella aktivoituva Tooltip toimii eri mobiilialustoilla eri tavoin tai sisältöä ei välttämättä näytetä lainkaan.
Tooltip näytetään oletuksena aktivoivan elementin hoverilla tai kohdistuksella. Tooltip asemoidaan oletuksena elementin yläpuolelle.
Tooltipin asemointia voi tarvittaessa muokata esim. oikealle puolelle.
Klikkaamalla avautuva Tooltip (“Popover”)
Tooltip on mahdollista määrittää avautuvaksi vain klikkaamalla aktivoivaa elementtiä, jolloin se on käytettävissä myös kosketusnäytöillä. Tätä tarkoitusta varten komponentissa on käytössä isPopover-property. Huomioi, että Popover ei sovi sellaisille elementeille, jotka klikattaessa käynnistävät jo jonkin muun toiminnon (esim. painikkeet).
Popover-varianttia käytettäessä painikkeena kannattaa ensisijaisesti käyttää info- tai kysymysmerkki-kuvaketta. Oletuksena komponentti näyttää info-kuvakkeen.
Tarvittaessa voit valita Popoveriin myös muun kuvakkeen. Lisäksi Tooltippiin voi liittää muotoiltua sisältöä, esimerkiksi lihavoitua tekstiä. Pyri kuitenkin ensisijaisesti käyttämään lyhyitä muotoilemattomia sisältöjä, tai mieti olisiko tarkoituksenmukaista näyttää tiedot asiakkaalle toisella tapaa.