Skip to content
SkillCodex
Menu

Concept cluster

Small contextual surfaces

Compare passive hints, interactive supporting content, and compact action menus around one trigger.

Try the 3 concepts, compare what changes, then use the Pack that fits your need.

Try the components

Small contextual surfaces

Try it

Do you need a short explanation, interactive contextual content, or an action list?

Tooltip

Shared trial context

A project workspace must reveal brief help, supporting details, or a short action list from a compact control without leaving the current task.

Tooltip

Mission

Tooltip

Reveal the icon's name with pointer and keyboard, then dismiss it with Escape.

Export report

report-july.pdf

Visible touch label: Export report

Live result

The hint is hidden. Focus can remain on Export report.

Step 1 of 3

Try

Try the component. Your live result appears just above. Move on at your own pace.

Behavior and edge case
What to observe
The hint appears beside the focused export button and leaves the button operable.
Edge case
On touch, the icon still has a visible accessible label path and no information depends only on hover.

What this example shows

Choose Tooltip only when the content is brief and contains no interactive element; use Popover for controls or richer content.

Use the Pack — Tooltip

Which fits your need?

Tooltip

Explaining an unfamiliar icon

Popover

Showing a compact explanation with a link

Which component will you use here?
Read the full PackVerify the result
Difference and sources

Choose Tooltip only when the content is brief and contains no interactive element; use Popover for controls or richer content.

Read the sources

    Parts of the specimen

    Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.

    Trigger

    The control that opens or reveals the surface.

    The three concepts

    ConceptTooltipA short, noninteractive hint that appears when a control receives pointer hover or keyboard focus.OpenConceptPopoverA small contextual surface opened deliberately to show supporting content or controls without making the whole page modal.OpenConceptDropdown menuA compact list of actions that opens from a button and supports menu-style keyboard navigation.Open

    The three comparisons

    ComparisonPopover vs TooltipComparisonDropdown menu vs TooltipComparisonDropdown menu vs Popover

    Signals you are confusing them

    These descriptions fit every concept in the cluster, so none of them is enough to decide.

    • a small surface anchored beside a compact trigger
    • contextual help, details, or actions appear close to the control

    Other concept clusters

    Concept clusterMotion & EffectsConcept clusterModal surfacesConcept clusterEdge-attached surfacesConcept clusterChoose from a listConcept clusterChoices and binary statesConcept clusterChange view or reveal contentConcept clusterInform the userConcept clusterWait and track progressConcept clusterTrigger or navigateConcept clusterEnter textConcept clusterOrient within a journeyConcept clusterStructure and explore data