Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Tooltip

v.1.0.0 | Saturn
Healthy
StorybookFigma

Simple text that displays extra contextual information next to the trigger element.

Components

Play with the component with our playground.

Anatomy

Foo

NameDescription

1

Container
Required
width
fluid (100% bounded by parent element) -
height
fluid (content) - _boder_ element description _token_.

2

Shape
Required
Point out the element to which it refers.

3

Title
Define the element to be explained.

Foo

NameDescription

1

Container
Required
width
fluid (100% bounded by parent element) -
height
fluid (content) -
left-radius
-
right-radius
.

2

Close button
Required
It close the message.

3

Title
Define the element to be explained.

Options

Desktop

Basic - Only description

  • It gives descriptive support to visual or action elements in just two words. These words don’t have a character limit.

    • Tablet and mobile

    Basic - Only description

  • It gives descriptive support to visual or action elements in just two words. These words don’t have a character limit.

    • Layout

    Desktop

    Fluid width

  • The width of the tooltip will depend on the content up to a maximum of 320px.

    • Fluid height

  • The height will depend on the content up to a maximum of 480px.

    • Margin between element

  • The tooltip must always respect a margin of 8px with respect to the element that activates it.

    • Trigger oriented

  • The arrow is situated in different positions depende on the trigger. The tooltip appears from there when the user interacts.

    • Several lines

  • The text and paragraph may contain several lines.

    • Position of the arrow

  • The arrow, it can be in the center, in one of the sides or in the other.

    • Tablet and Mobile

    Scroll

  • If the tooltip has a lot of information and cannot be seen on the screen, a scroll bar will be shown. The paragraph must respect the bottom padding of 16px. The title and the close button are sticky.

    • Tooltip full width

  • The tooltip (tablet and moble version) is full width. When the content is larger the tooltip will occupy the full height of the screen.

    • Behaviours

    Element that activates tooltip

    Desktop

    Basic - Show tooltip

  • The tooltip can be displayed in the following ways:

    1. Keyboard focus: by keyboard focus on the activating element.

    1. Hover: Hovering over the activating element.

    • Basic - Hide tooltip

  • It can be hidden in the following ways:

    1. Losing Keyboard focus (escape key).

    1. Not hovering over the activating element.

    • Tablet and Mobile

    Basic - Show tooltip

  • The tooltip can be displayed in the following ways:

    1. On tap: The user actively interacts with the element.

    1. Focus by default: In some cases it may appear open by default without being activated by the user.z

    • Basic - Hide tooltip

  • It can be hidden in the following ways:

    1. Tapping outside the tooltip area.

    1. Tapping on the close button.

    • Do's and dont's

    Foo

    Do’s

    Display only text.

    Foo

    Don’t

    Don’t display rich information and imagery on tooltips. Also don’t display buttons, links or other interactive elements.

    Foo

    Do’s

    Use tooltips to explain an information or an action.

    Foo

    Don’t

    Do not use several tooltips on the same screen.

    TooltipUsage
    TooltipCode API