Tooltip and Popover

COMPONENT GUIDE

Explore behaviors before defining the interface.

Always consider the context of the application, even when the guidance follows a standard pattern. Interaction design documents intent. Behavior must be verified in the implementation.

When to use

Consider keeping the information visible or using a disclosure. The source warns about behavioral differences between libraries.

What to draw

Show the trigger, supplementary content, and close control when present, without covering relevant information.

How it behaves

This source’s pattern opens on activation, rather than hovering alone. Escape closes open content.

What to document in Figma

Record opening, closing through the trigger or an outside click, and screen reader access to the content. Evaluate carefully on small screens.

How to review

Check whether the purpose and states are clear on small and large screens and with zoom. Verify documented behavior in the implementation, including keyboard and screen reader use where applicable.

Full guidance

Interaction Design

Questions to ask when designing interactive components of type Tooltip or Popover.

Important:
Depending on the context in which you build your components, there may be further questions, and some listed here may not be necessary. Assess each case individually.

Designing for "no interaction"

Before interacting, can you visually tell that the component is interactive?

Designing for mouse use (any pointing device)

Is there visual feedback when hovering over the actionable component?
Is there visual feedback when clicking the actionable component?
Is the additional content activated only after a click, rather than on hover?
Does the additional content opened after activation overlap other relevant content on the screen?
Does clicking anywhere outside the open content close the additional content?
Does the open content have a close control that can be clicked with the mouse?

Designing for gesture use

Is there visual feedback when activating the component?
Does the additional content opened after activation overlap other relevant content on the screen?
Does tapping anywhere outside the open content close the additional content?
Does the open content have a close control that can be tapped?

Designing for keyboard use (any non-pointing device)

Is there visual feedback when focusing the actionable component?
Can you interact with the actionable component using the "enter" or "Space"?
When activated by keyboard, does the component display content without overlapping other relevant content?
Does the open content have a close control that can be activated by keyboard?
Can you close the additional content using the "esc"?

Designing for screen reader use

When focusing the component, can you hear that it is a button rather than a link?
When focusing the component, can you clearly hear which additional content will open?
After opening the additional content, can you hear it directly?
With the additional content open, can you use the keyboard to find the close control and identify its purpose?

Interaction methods

Possible interaction methods for components of type Tooltip or Popover.

Important:
Only the main methods are listed here. Custom components require further study.

Mouse interaction (any pointing device)

On hover, the component should provide visual feedback confirming that interaction is possible.
On a mouse click, the component should provide visual feedback confirming the click.
On a mouse click, the content should open.
Clicking outside the component should close any content associated with it that is open.
If the component has a close control (for example, a close button), clicking it should close the content.

Keyboard interaction (any non-pointing device)

When focused with the keyboard, the component should provide visual feedback with a visible focus indicator.
It should be possible to activate the component that opens additional content with the ENTER or Space.
After opening additional content, if a close control exists, pressing the TABkey should allow you to go directly to that control.
Additional content should close when the close control is pressed, if present, or when the ENTER or Space keys are pressed while focus is on the component responsible for opening the additional content.
Pressing the ESC key also closes additional content if it is open.

Keyboard (or gesture) interaction + screen reader

When focusing the component that opens additional content, you can identify it as a button.
When focusing the component that opens additional content, you can hear which content will open.
After opening additional content, you can hear the content that opened.
If there is a close control when the additional content is open, pressing the "tab" key should let you hear that the control is a button responsible for closing the additional content.
With additional content open, if the "esc" key is pressed, you should be able to identify that the additional content is no longer open.

Gherkin

BDD (Behavior-Driven Development) methodology focusing on three pillars: User Stories, Acceptance Criteria, and Gherkin Syntax (Given, When, Then).

Scenario: Given that I am on a page containing a Tooltip or Popover

Keyboard navigation

WHEN I use the Tab key to move focus to the component that opens additional content
The focus I SEE is strongly indicated visually
THEN, when I use Enter or Space to activate the component
I SEE the additional content displayed
THEN, when I use the Esc or activate the close control
I SEE the additional content closed

Desktop screen reader

When I use a screen reader on a computer (NVDA, JAWS, VoiceOver) and use the Tab key to move focus to the component that opens additional content
- I HEAR the component's name.
- I HEAR that the component is identified as a button when its purpose is to open or close content.
- I HEAR which additional content will open or what the component's purpose is.
THEN, when I activate the component
I HEAR the additional content or can reach it through the navigation order.
AND, when I close the additional content, I HEAR or perceive that it is no longer open.

Mobile screen reader

WHEN I use a screen reader on a phone (TalkBack, VoiceOver) and swipe to focus the component that opens additional content, the following happens:
- I HEAR the component's name.
- I HEAR that the component is identified as a button when its purpose is to open or close content.
- I HEAR which additional content will open or what the component's purpose is.
THEN, when I double-tap to activate the component
I HEAR the additional content or can reach it through the navigation order.

Considerations

Considerations for components of type Tooltip or Popover.

There is still no consensus external link - opens in a new window (opens in a new tab) on the interaction methods needed for this component to work properly. Implementations in different places are inconsistent in both behavior and naming, with different libraries using different names. The interactions described in this material therefore draw on mental models associated with similar components.
Tooltips and similar components are commonly interpreted as a sign of "poor design", precisely because their interactions are complex to understand. If you really need to provide a hint, consider a modal or expanding components such as an accordion.
On smaller screens, pay extra attention to their use. Avoid them whenever possible.
Interactions using mouse events such as "mouseover" or "mouseout" are not recommended, particularly for content displaying more than one line of information.

References

Additional references for components of type Tooltip or Popover.

Important:
Most references are on the course platform alongside the lessons cited in this material.

Disclaimer:
The links listed here are a curated collection of references where you can find implemented components, rather than recommendations. There is no unified implementation format and no guarantee that these links follow every design pattern. Direct questions to the teams responsible for the linked materials. Before copying a model, remember that all materials are constantly updated and that patterns, particularly proprietary ones, may change.