Skip to content
Telescope

Overlays

An overlay provides contextual information and options in form of an additional layer on top of the current state of the interface.

Tooltips

A tooltip should be used to describe an interactive element, not add additional content. They appear on hover (or focus) and for this reason, they should not themselves contain interactive elements. In other words, it's not a tooltip if there's no tool.

Unsure what happens if you click this button? Try hovering it first.

See the Tooltip component for detailed guidelines.

Popovers

A popover should be used to provide additional contextual content. They appear when users focus on, or click an interactive element. Users should be able to interact with popover content, including selecting text or clicking links.

See the Popover component for detailed guidelines.

Modals

A modal should be used to create focus and complete simple tasks. They prevent people from doing other things until they complete a task or dismiss a message or view. Only use a modal when it’s critical to get someone’s attention. In other words, use sparingly.

See the Modal component for detailed guidelines.

Drawers

Like a modal, a drawer can be used to focus a user's attention on task completion. However, it's intended for more complex tasks that involve forms with multiple elements, potentially organized into separate steps. Drawers can also be used to view detailed information about an item.

See the Drawer component for detailed guidelines.

Summary

  • For a hint on what an interaction does, use a tooltip.
  • For additional contextual content, use a popover.
  • For a temporary change of context involving a simple task, use a modal.
  • For a more complex task or viewing details about an item, use a drawer.

References

Looking for more guidelines on this topic? Check out our curated list of resources.