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. Se sulkeutuu, kun asiakas klikkaa muualle tai sulkee työkaluvihjeen 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. Accordion).

Työkaluvihjeen voi myös yksinkertaisimmillaan toteuttaa HTML:n title-attribuutilla.

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 ruudunlukijaohjelmistoilla. Painike-elementti saa aria-describedby-attribuutin, jonka arvo on tooltip-elementin id.

Ruudunlukijat lukevat hoverilla tai kohdistuksella näytettävän Tooltipin (oletus) sisällön automaattisesti painikkeen tekstin jälkeen.

Huomaa, että hover-toimintoa ei aina tueta kosketusnäytöillä, jonka vuoksi Tooltip ei kaikissa tapauksissa täytä kaikkia saavutettavuuskriteerejä.

Popover-versiota käytettäessä ruudunlukija lukee ensin aria-expanded-attribuutin ja kuvakkeelle määritetyn tekstin (popoverIconLabel). Painikkeen aktivoinnin jälkeen ruudunlukija lukee työkaluvihjeen sisällön aria-live-aluetta käyttäen. Käyttäjä voi myös navigoida työkaluvihjeen sisältöön.

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.

Esimerkit

Käytä hoverilla tai kohdistuksella aktivoituvaa Tooltippiä ensisijaisesti sellaisten interaktiivisten elementtien kanssa, jotka sisältävät jonkin toiminnon ja jotka ovat kohdistettavissa (esim. a, button tai input). Muita elementtejä käytettäessä (esim. div tai span), tulee varmistaa, että elementtiin voi viedä kohdistuksen, lisäämällä sille attribuutin tabindex="0".

Huomioi, että Tooltip-komponenttia ei voi hyödyntää kosketusnäytöillä elementeissä, jotka eivät saa kohdistusta. 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 asemoidaan oletuksena elementin yläpuolelle.

Tooltipin asemointia voi tarvittaessa muokata esim. oikealle puolelle.

Tooltip on mahdollista määrittää avautuvaksi, kun klikataan aktivoivaa elementtiä, jolloin se on käytettävissä myös kosketusnäytöillä (isPopover). Huomioi, että Popover ei sovi sellaisille elementeille, jotka klikattaessa käynnistävät jonkin muun toiminnon (esim. painikkeet).

Popover-versiota käytettäessä painikkeena kannattaa ensisijaisesti käyttää info- tai kysymysmerkki-kuvaketta. Oletuksena komponentti näyttää info-kuvakkeen.

Tarvittaessa voit valita klikattavaan työkaluvihjeeseen 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.

Kokovaihtoehdot

Pienin koko (xs) on tarkoitettu tiivistä asettelua vaativiin asiantuntijakäyttöliittymiin.

Tooltipin renderöinti portaalin avulla

Valikko voidaan renderöidä sivun loppuun usePortal-proppia käyttäen. Tämä on tarpeellista silloin, kun ympäröivä elementti ei salli sisällön näyttämistä sen ulkopuolella.

Työkaluvihjeen sisältöön ei voi navigoida VoiceOver-ruudunlukijalla usePortal-propin kanssa.

Vaihtoehtoisesti voi käyttää placementStrategy="fixed"-asetusta. Tällöin on hyvä varmistaa, että ympäröivät tyylimääritykset ei häiritse työkaluvihjeen asemointia. Suorituskyky on myös huonompi, koska työkaluvihjeen sijaintia joudutaan päivittämään jatkuvasti sen auki ollessa.

Työkaluvihje (oletus):

Työkaluvihje (popover):

Huomioitavaa selaintuessa

Komponentti käyttää kohdistuksen hallintaan WeakRef-ominaisuutta, joka ei ole tuettu Safari <14.1 / iOS <14.5 Lue lisää: WeakRef(Avautuu uuteen välilehteen)