Toggletip

[Rozerinay]

We willen graag meer leren over de Toggletip component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Toggletip

Doel

Een knop die tijdelijke informatie toont en deze automatisch verbergt wanneer iets anders dan de knop wordt gebruikt.

Ook bekend als

Tooltip

Onderzoek

Tooltips & Toggletips - Inclusive Components
In dit artikel wordt besproken wanneer je een Toggletip moet gebruiken en hoe je deze toegankelijk en inclusief kunt implementeren. De auteur stelt dat Toggletips vaak onnodig complex zijn voor informatie die net zo goed direct in de tekst zou kunnen staan.

Tooltips and Toggletips - Pearson
Overzicht van toegankelijkheidseisen voor een Toggletip.

Toggletip gebruikersonderzoek - RVO
In de onderstaande reactie geeft Robert aan dat uit gebruikersonderzoek naar de Toggletip blijkt dat het ‘i’-icoon niet door gebruikers werd begrepen.

Target Size (Minimum) (Level AA) - W3C
Er wordt aanbevolen dat klikbare elementen, zoals iconen, een minimale grootte van 24 x 24 px hebben.

[hidde]

Ik vind de naam verwarrend bij het doel en het screenshot, die lezen/ogen meer als een tooltip?

Wat een toggletip uniek maakt is denk ik dat het expliciet door een actie van de gebruiker wordt getoggled, bv met het klikken op een knop, terwijl een tooltip uit zichzelf verschijnt en verdwijnt, bv door hover of focus.

[Rozerinay]

DSO

• Documentatie website
• Storybook
• Github

---

Screenshots / Varianten

Storybook

Info button

Position right

Position top
Note: Inhoud van Toggletip wordt eronder gepositioneerd vanwege de beperkte ruimte aan de bovenzijde.

Position bottom

Position left
Note: Inhoud van Toggletip is niet goed zichtbaar vanwege de beperkte ruimte aan de linkerzijde.

Small

Secondary

Responsive gedrag

---

Notities

• Info button heeft default en secondary variant.
• Hover: andere styling.
• Positionering van de inhoud van Toggletip is instelbaar: top, right, bottom, left.
• Keuze in small inhoud: wel of niet.
• Toegankelijk label is instelbaar en is standaard 'Toelichting' als deze niet is gedefinieerd.
• Toggletip sluit bij een klik overal op de pagina.
• Inhoud van Toggletip kan bestaan uit een Heading, Paragraph en Link.
• Richtlijnen beschikbaar.

[Rozerinay]

RVO

Reactie in Slack

---

Screenshots / Varianten

---

Toelichting Robert Roose

Wij zijn afgestapt van dit component omdat klanten het 'i'-tje niet begrepen en dat alleen overheidsmedewerkers het snapte. Ik kan dit helaas niet onderbouwen met harde onderzoeksdata maar wellicht goed om dit component nog eens te laten testen.

In het voorbeeld hierboven is een formulier in een zaaksysteem te zien dat is getest.

[MarjonBakker]

Zie ook het artikel Tooltips in the time of WCAG 2.1 van Sarah Higley. Al wat ouder, 2019, maar staat nog steeds.

[jeffreylauwers]

Zie ook het mini-artikel Simple Standalone Toggletip widget pattern van Steve Faulkner. Hij doet een voorzet voor een stukje code om dit component op te maken. Er wordt gebruik gemaakt van JS. Ik kan niet beoordelen of dat goed is.