Tooltip
Tooltip
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.
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.
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.
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.