Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardCheckboxDate inputDialogDropdownFieldsetFooterIconKorosLoading spinnerLogoNavigationNotificationNumber inputPassword inputPhone inputRadio buttonSearch inputSelection groupStatus labelTabsTagText fieldsTime inputToggle buttonTooltipPrinciplesAccessibilityUsage and variationsDemos & API
Patterns
About
Contributing
Resources

Tooltip

StableAccessible

Tooltips are used to present context or background information to the user.

Principles

  • Tooltip must not be the sole way to provide essential information that the user must know to perform a task (such as inputting a value). This means Tooltip should display "nice to have" but not essential information.
    • For more information on what elements should be used to present different kinds of information, refer to HDS Form pattern - Providing instructions guideline
  • Be clear and consise in the Tooltip description. Keep the description as short as two to three sentences. If longer explanations are needed, provide a link to a separate page.
  • HDS Tooltips come in two sizes; Default and Small. Only use the Small variant if the Tooltip text is less than 5 words long. Otherwise you should use the Default size variant.
  • HDS Tooltip implementation has an automatic placement feature that is the recommended option. You may also override the Tooltip positioning manually but always remember to test that the Tooltip is fully visible on all screen sizes.

Accessibility

  • Even though HDS Tooltip does not include a visual title, one must be included for screen readers via using aria-label. The label can be as simple as "Info" but it can also feature more detailed description such as "More information about filling your personal details".
  • If a Tooltip contains a link, always open them to a new window, so that the process of filling the form is not interrupted.
  • Do not make the tooltip open on hover. The user should be able to select the text inside the tooltip element.

Usage and variations

Default

The default size Tooltip variant works in most situations where the Tooltip description is longer than a few words.

React code example:

<Tooltip>
Tooltips contain "nice to have" information.
Default Tooltip contents should not be longer than two to three sentences.
For longer descriptions, provide a link to a separate page.
</Tooltip>

Small

A small size Tooltip variant can be used instead of the default one if the description is only a few words long (less than 5 words). Also, note that the small Tooltip should never replace labels (e.g. for icons). WCAG requires that labels are always visible and not hidden behind a Tooltip.

React code example:

<Tooltip small>
Less than five words long
</Tooltip>

Positioning

HDS Tooltip implementation has automatic placement feature. It will automatically try to keep the Tooltip in the view and dynamically updates the positioning if the screen size changes. Tooltip positioning can also be overridden manually.

React code example:

<Tooltip placement="auto">Tooltip with auto placement setting</Tooltip>
<Tooltip placement="auto-start">Tooltip with auto-start placement setting</Tooltip>
<Tooltip placement="auto-end">Tooltip with auto-end placement setting</Tooltip>
<Tooltip placement="top">Tooltip with top placement setting</Tooltip>
<Tooltip placement="top-start">Tooltip with top-start placement setting</Tooltip>
<Tooltip placement="top-end">Tooltip with top-end placement setting</Tooltip>
<Tooltip placement="bottom">Tooltip with bottom placement setting</Tooltip>
<Tooltip placement="bottom-start">Tooltip with bottom-start placement setting</Tooltip>
<Tooltip placement="bottom-end">Tooltip with bottom-end placement setting</Tooltip>
<Tooltip placement="right">Tooltip with right placement setting</Tooltip>
<Tooltip placement="right-start">Tooltip with right-start placement setting</Tooltip>
<Tooltip placement="right-end">Tooltip with right-end placement setting</Tooltip>
<Tooltip placement="left">Tooltip with left placement setting</Tooltip>
<Tooltip placement="left-start">Tooltip with left-start placement setting</Tooltip>
<Tooltip placement="left-end">Tooltip with left-end placement setting</Tooltip>

Demos & API

Core

Not included in hds-core!

React

Tooltips in hds-react

Tooltip API