Skip to content
Components

Help popoverWarning: Draft

An icon button with a question mark that reveals help information on click or tap.

A help popover isn’t a cure for unclear labelling. Have a go at fixing the label before tacking on a popover.

29553cae-7a66-80ec-a482-dca6084a6bd3.png
29653cae-7a66-8002-95b1-fe92a8fb8c38.png

Only curious users will toggle a popover. Many will skim past them, assuming they already understand. If the information is essential, make it visible in the UI where it can’t be missed.

29553cae-7a66-804a-ac48-ed96d707776d.png
29553cae-7a66-8044-8f1b-ebf0f7343747.png

Short is best — aim for under 10 words. Avoid jargon, complex sentences, and repeating what’s already on screen. Test clarity with a readability checker (score 70+).

29553cae-7a66-8036-883f-e8f9de68fc5d.png
29553cae-7a66-801d-ae62-defc561b5d21.png

Too many popovers dilute their usefulness. Only include them when they add real value — clarifying, reassuring, or guiding.

On this page
This page is a draft. Its content is likely to change.