Skip to content
SkillCodex
Menu

Behavior comparison

Dropdown menu vs Tooltip

Decisive difference

Dropdown menu opens a list of commands the user activates; Tooltip only describes its reference element and contains nothing interactive.

Choice criteria, links and sources
  • Dropdown menuChoose Dropdown menu if the user must pick an action such as Edit, Duplicate, or Archive.Open entry Dropdown menu
  • TooltipChoose Tooltip if a short text merely explains an icon or control and nothing can be clicked inside it.Open entry Tooltip

See the nine dimensionsSee the sources

Dropdown menu

Mission

Dropdown menu

Open the menu, reach Duplicate with arrow keys, activate it, and verify focus returns to the row action button.

Launch card

Final preparation

1 copy

Live result

No action has run. The menu is closed.

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
A vertical action list opens under the button with the first enabled item active.
Edge case
The unavailable Archive action exposes its disabled state and cannot be activated.

What this example shows

Use Dropdown menu for commands such as Edit or Archive, not for choosing a form value like Select and not for arbitrary rich content like Popover.

Which fits your need?

Dropdown menu

Grouping secondary actions for one item

Tooltip

Explaining an unfamiliar icon

Which component will you use here?
Difference and sources

Use Dropdown menu for commands such as Edit or Archive, not for choosing a form value like Select and not for arbitrary rich content like Popover.

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.

    Decision

    Family question

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

    Three criteria to choose

    Trigger

    Dropdown menu

    A menu button activated by press, click, Enter, Space, or Arrow Down.

    Tooltip

    Pointer hover or keyboard focus on the reference element.

    Interactivity

    Dropdown menu

    A collection of actions with managed keyboard focus, not arbitrary form content.

    Tooltip

    Contains no interactive controls; focus remains on the reference.

    Focus

    Dropdown menu

    Opening places menu focus on an enabled item; closing restores focus to the trigger.

    Tooltip

    Focus remains on the trigger; the tooltip itself never enters the tab order.

    Nine dimensions

    Trigger

    Dropdown menu

    A menu button activated by press, click, Enter, Space, or Arrow Down.

    Tooltip

    Pointer hover or keyboard focus on the reference element.

    Modality

    Dropdown menu

    Non-modal action popup that closes after a choice, Escape, or an outside action.

    Tooltip

    Non-modal supporting description; the page remains active.

    Placement

    Dropdown menu

    Anchored to the menu button and aligned within the viewport.

    Tooltip

    Anchored beside its reference and repositioned to remain visible.

    Interactivity

    Dropdown menu

    A collection of actions with managed keyboard focus, not arbitrary form content.

    Tooltip

    Contains no interactive controls; focus remains on the reference.

    Focus

    Dropdown menu

    Opening places menu focus on an enabled item; closing restores focus to the trigger.

    Tooltip

    Focus remains on the trigger; the tooltip itself never enters the tab order.

    Dismissal

    Dropdown menu

    Selecting an action, pressing Escape, or safely pressing outside closes the menu.

    Tooltip

    It closes on Escape and after both focus and pointer leave the trigger and surface.

    Accessible role

    Dropdown menu

    menu > menuitem

    Tooltip

    tooltip

    Use case

    Dropdown menu

    Grouping secondary actions for one item

    Tooltip

    Explaining an unfamiliar icon

    Mobile behavior

    Dropdown menu

    Open on tap, keep generous item targets, and prefer an action sheet for a dense menu.

    Tooltip

    Never rely on hover alone; expose essential help persistently or through an explicit tap pattern.