Tooltip

Tooltip is a non-modal overlay that appears on hover or focus. Initially hidden, it provides concise, text-only content related to the associated interactive element. It also typically offers supplementary, non-essential information without disturbing the user workflow.

Also known as: Hint
Salt package@salt-ds/core
Available since1.2.0
Code
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Using the component

When to use

  • When you want to display a brief message to the user that provides additional information about an interactive UI element.

When not to use

  • When the content contains interactive elements, such as a link, input or button. Consider always making this content visible or using Overlay or Dialog instead.
  • When there's information that the user needs to know to complete a task. Important help text should always be visible to the user.
  • When the message always needs to be visible. Instead, place the message directly on the page.
  • When the message isn't about a UI element. Consider adding the message directly on the page or using Overlay, Dialog, or Banner instead.

Content

Tooltip content will never truncate. It should be short and self-explanatory. If a longer message is necessary, consider adding it to the page so it's always visible.

Import

To import Tooltip from the core Salt package, use:

Props