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
Small contextual surfaces
Try it
Do you need a short explanation, interactive contextual content, or an action list?
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.
Dropdown menu
Tooltip
Mission
Tooltip
Reveal the icon's name with pointer and keyboard, then dismiss it with Escape.
Export report
report-july.pdf
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
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
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 sourcesParts of the specimen
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.
| Dimension | Dropdown menuDropdown menu | TooltipTooltip |
|---|---|---|
| Trigger | A menu button activated by press, click, Enter, Space, or Arrow Down. | Pointer hover or keyboard focus on the reference element. |
| Modality | Non-modal action popup that closes after a choice, Escape, or an outside action. | Non-modal supporting description; the page remains active. |
| Placement | Anchored to the menu button and aligned within the viewport. | Anchored beside its reference and repositioned to remain visible. |
| Interactivity | A collection of actions with managed keyboard focus, not arbitrary form content. | Contains no interactive controls; focus remains on the reference. |
| Focus | Opening places menu focus on an enabled item; closing restores focus to the trigger. | Focus remains on the trigger; the tooltip itself never enters the tab order. |
| Dismissal | Selecting an action, pressing Escape, or safely pressing outside closes the menu. | It closes on Escape and after both focus and pointer leave the trigger and surface. |
| Accessible role | menu > menuitem | tooltip |
| Use case | Grouping secondary actions for one item | Explaining an unfamiliar icon |
| Mobile behavior | Open on tap, keep generous item targets, and prefer an action sheet for a dense menu. | Never rely on hover alone; expose essential help persistently or through an explicit tap pattern. |