No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Tooltip
Overview
Tooltips display support text when users hover over, focus on, or tap an element.
Do
  1. Describes differences between similar elements
  2. Distinguishes actions with related iconography
  3. Provides advanced tips such as keyboard shortcuts
  4. Displays full information of ellipse texts
Don't
  1. Don’t use tooltips to restate visible UI text
  2. Don't use tooltips to display hidden actions
  3. Don’t display rich text and imagery on tooltips
Tooltip anatomy
  1. Text
  2. Border (2px)
  3. Background
  • No more than 12 words or 65 characters per line
  • No more than 3 lines of text
Demo
Example of tooltip message.
Prop API
Go to Setup for instructions on how to import the component.
NameDescriptionDefault
id*
Text that will serve as unique identifier. It's also an important accessibility tool.
string
-
text*
Text that will be rendered inside the Tooltip.
string
-
placement
Defines the Tooltip's relative position from the target.
"top-start""top""top-end""right-start""right""right-end""bottom-start""left-start"
"top"
children*
Target component to which the Tooltip should be applied upon.
node
-
Behavior
On desktop, a tooltip is displayed upon hovering over it. It is not displayed on mobile. Continuously display the tooltip as long as the user hovers over the element.
Good example of how to use a tooltipBad example of how to use a tooltipGood example of how to use a tooltipBad example of how to use a tooltip
  1. By default the tooltip appears above and in the center of click targets* and stays in place while the cursor moves within the target
    1. Tooltip disappears when the cursor moves out of the target
    2. Tooltip remains while the cursor moves within the target
  2. On sidebars, it should display either from the left or the right of click targets
  3. Over 150ms, tooltips fade in and scale up using the deceleration curve. They fade out over 75ms.
* When close to screen limits, keep tooltip position visible with margins of 12px for all sides.
Theming
The tooltips color is defined in the scss/variables/_settings.scss file, and can be Black, Teal or Purple. Avoid using Purple tooltips if the project theme is Teal, and vice versa.
Available colors for tooltips
Special Guidelines
Placement
Tooltips placement relative to the target is defined by the user through props, and can have one of the 12 following values. The default value is top.
top-start
top
top-end
left-start
right-start
left
right
left-end
right-end
bottom-start
bottom
bottom-end
Long texts
Tooltip text should not be longer than 180 characters and 3 lines. A warn will be thrown in the console if the 180 chars limit is crossed.
Lorem ipsum dolor sit amet, has integre virtute consequat at. Sit quodsi gloriatur efficiantur in, quas inermis menandri ex vix. Sit quodsi gloriatur efficiantur in, quas inermis.
Icon
Tooltip can also be triggered by an Icon or other elements.
Tooltip triggered by an Icon