Skip to main content

We're excited to launch Tallinn Design System! While it allows you to create interfaces the Tallinn way it's still a work in progress. If you think something’s missing or isn't working, please let us know at disain@tallinnlv.ee

Version: Canary 🚧

Change log

Components

Tooltip

When to use

Use tooltips to add a small amount of information to an element. For example:

  • help people understand the meaning or purpose of icons.
  • show non-essential supporting information.

When not to use

Do not use tooltip for information that is crucial for completing a task. Use hint text that is always visible and accessible for vital information. Tooltips have low discoverability and have usability issues on devices without hover interactions.

Do not include interactive elements such as links or buttons inside a tooltip. Interactive elements in tooltips are inaccessible for some users and are hard to use for all users since tooltips do not receive focus.

Do not use tooltips to display error or status messages.

Principles​

The tooltip can only contain text and should not be used to hide important information.

Behavior​

Tooltips appear on hover and focus.

By default, tooltips have a 200ms entry delay when hovering over an object. This is to ensure that the UI isn't constantly showing tooltips when a user is moving their mouse over the page. The default exit delay is set to 100ms.

When navigating by keyboard, tooltips appear immediately on focus and disappear also without delay when navigating away from the element with the tooltip.

Trigger examples​

Size​

The maximum width of a tooltip is set to 240px. Longer content is wrapped to multiple lines.

Placement​

Tooltips should always be placed in a way that does not cover related content that is essential to the user’s tasks. Tooltips should not bleed off page or appear behind other content.

For tooltips that are inline with other text, like a definition tooltip, do not obstruct words to the left and right of the trigger word.