Tooltip

A tooltip helps in conveying and carrying additional short static information specific to the states of components while hovering over the component.

Status

Status

Healthy

Figma component

Includes a link to a Figma component that has been imported to Supernova

Principles

Use when

  1. there is a need to briefly provide additional information about a related action, especially if the action requires further explanation.
  2. on UI elements that have a disabled state, explain why the component is in the disabled state.

Don't use when

  1. if you want to convey general information across the layout. Instead, use notifications.

Structure

tooltip-structure

 

  1. Tooltip label
  2. Action button (boolean)
  3. Redirecting link

Properties

Types

Short

A short tooltip is needed when there is a need for icon buttons to indicate their action and provide other informational details for UI elements such as buttons and helper text.

Brief

A brief tooltip is needed when more clarification is required for a state where something has happened.

Interactive

An interactive tooltip is used to describe a situation in which a redirection or an external source is involved, including a link component.

Content

Provide a clear and direct description of the action or situation.

While using the short tooltip, keep it concise. Use verbs or objects if they will be helpful.

Also, while using an interactive tooltip, keep the sentences one sentence long.