Tooltip

Also known as

Hint
Available since
@salt-ds/core@1.2.0

Tooltip displays a brief message to the user that provides additional information about a UI element. The tooltip appears after the user’s mouse pointer hovers over the target element for a certain time. It can communicate new or supporting information, errors, warnings or successful completion of a process or task.

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected
Density
Mode

By default, Tooltip displays a message and an arrow pointing to the relevant UI element. Its default placement is "right," and appears after 300 milliseconds.

Use the status prop to define the tooltip’s icon and border color. You can choose between the following statuses:

  • Info: Use this status when you need to display general information.
  • Error: Use this status to communicate a critical issue preventing the user from continuing.
  • Warning: Use this status to inform users of an issue or potential issue related to their current task. Use this for issues that don't prevent the user from continuing or completing their task.
  • Success: Use this status to confirm the successful completion of a user's action.

Use the hideArrow prop to display the tooltip without the arrow.

Use the hideIcon prop to display the tooltip with text only and no status icon.

Use the content prop to pass a simple string or a React component displayed inside the tooltip.

Use the placement prop to position the tooltip on its targeted UI element.

Use the enterDelay or leaveDelay props to change the milliseconds before the tooltip appears or disappears.