Tooltip
Tooltip is a non-modal overlay, initially hidden, that appears on hover or focus. It provides concise, text-only content related to the associated interactive element, typically offering supplementary (non-essential) information without disturbing the users workflow.
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 content prop to pass a simple string to display in the tooltip.
Tooltips are triggered by both focus and hover events and remain visible and persistent until:
- Hover or focus is removed from the trigger element
- The user manually dismisses it (e.g.
Esckey) - The content is no longer valid
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 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.
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 content prop to pass a simple string to display in the tooltip.
Tooltips are triggered by both focus and hover events and remain visible and persistent until:
- Hover or focus is removed from the trigger element
- The user manually dismisses it (e.g.
Esckey) - The content is no longer valid
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 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.
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 content prop to pass a simple string to display in the tooltip.
Tooltips are triggered by both focus and hover events and remain visible and persistent until:
- Hover or focus is removed from the trigger element
- The user manually dismisses it (e.g.
Esckey) - The content is no longer valid
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 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.