TooltipReady

Tooltips are floating containers for displaying additional information for the currently focused element. A tooltip can be useful when you want to e.g. give a hint about an existing Command Menu shortcut.

Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
View RTL
<nord-stack align-items="center" style="margin: var(--n-space-xl) auto">
  <nord-button aria-describedby="tooltip">View tooltip</nord-button>
</nord-stack>

<nord-tooltip id="tooltip">I'm a tooltip</nord-tooltip>

Properties

PropertyAttributeDescriptionTypeDefault
positionposition

Control the position of the tooltip component. When set to "none", the tooltip will be shown above but accommodate for browser boundaries.

"block-end" | "block-start" | "inline-start" | "inline-end""block-start"
rolerole

The tooltip role, set on the component by default.

string"tooltip"
idid

The id for the active element to reference via aria-describedby.

string""
delaydelay

The delay in milliseconds before the tooltip is opened.

number500

Slots

Slot nameDescription
Default slot

The tooltip content

shortcut

Optional slot that holds shortcut keys to access the subject

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

PropertyDescriptionDefault
--n-tooltip-max-size

Controls the maximum inline size, or width, of the tooltip.

50ch

Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do

  • Use a tooltip if an interactive element requires more explanation.
  • Use a tooltip to provide additional information, such as UI shortcuts.
  • Use the label attribute on icons used for shortcuts for accessibility.
  • Use clear and accurate phrasing.
  • Be consistent with positioning of tooltips in the user interface.

Don’t

  • Don’t use interactive elements such as links or buttons inside a tooltip.
  • Don’t rely on tooltips when you have room to provide more explanation.
  • Don’t depend on tooltips for vital information.

Content guidelines

Tooltips should be clear and informative, but not imperative to using the interface they refer to. They should not contain interactive elements such as buttons or links.

Export – Export data as a spreadsheet
Export – Export data as a CSV, more information on CSVs

Tooltips should provide useful information and not repeat information that is already present.

Export – Export data as a spreadsheet
Export – Export data

When writing tooltips, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

Export data as a spreadsheet
Export Data As a Spreadsheet

Use tooltips sparingly. If your UI is requiring a lot of tooltips, consider revising the interface to provide better explanations and better labelling.

Additional considerations

  • Always provide a tooltip for icon-only buttons or a button with an associated keyboard shortcut.
  • Don’t use tooltip to communicate critical information, including errors.
  • Use sparingly. If you’re building something that requires a lot of tooltips, take a step back and work on clarifying the design and the language used instead.

Integration

For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.

Was this page helpful?

YesNoSend feedback

We use this feedback to improve our documentation.