Welcome to the StepOne components documentation
StepOne Fundation
StepOne Modules
Tooltip
Used to show tooltips. For it to work it is necessary to indicate who will be the parent element on which the Tooltip will be displayed, for this it is necessary to:
- Create a reference to the parent element.
- Pass this reference to our Tooltip component by means of the parentRef attribute..
Tooltip Props
| Name | Use | Type | Definition |
| parentRef | required | React.RefObject<HTMLElement> | A reference to the parent element of the tooltip. |
| className | optional | string | Apply different styles for the tooltip. |
| id | optional | string | ID attribute for the tooltip. |
| placement | optional | TooltipPosition | Specifies the position of the tooltip relative to its parent. |
| renderAsPortal | optional | boolean | Renders the tooltip as a portal. |
Examples
Tooltip
Bottom
Variants
Tooltip on top of element
This variant will be displayed when the element is in the lower half of the screen.
I am tooltip
Tooltip on right of element
This variant will be displayed when the element is in the left half of the screen and width of the Tooltip goes of the screen.
I am tooltip
Tooltip on bottom of element
This variant, is a default variant, will be displayed when the element is in the upper half of the screen.
I am tooltip
Tooltip on left of element
This variant will be displayed when the element is in the right half of the screen and width of the Tooltip goes of the screen.
I am left