yarn add @leafygreen-ui/guide-cuename | default | description | type |
|---|---|---|---|
baseFontSize | '-' | Allows consuming applications to override font-size as set by the LeafyGreen Provider. | 13, 16 |
beaconAlign | Align.CenterHorizontal | Determines the alignment of the beacon(animated pulsing circle that appears on top of the trigger element). This only applies to the multi-step tooltip. | "top", "bottom", "left", "right", "center-horizontal", "center-vertical" |
buttonText | '-' | Text to appear inside the primary button. The default text for the stand-alone tooltip is `Got it`. The default text for the multi-step tooltip varies on the `numberOfSteps` and `currentStep`. If `numberOfSteps === currentStep` the text is `Got it` else it is `Next. | string |
children* | '-' | Body content to appear inside the tooltip, under the title. | ReactNode |
currentStep | 1 | Used to display the current step. If `numberOfSteps === 1` this number will not display. | number |
darkMode | false | Renders the component with dark mode styles. | boolean |
enabled | true | Enables Tooltip to trigger based on the event specified by `triggerEvent`. | boolean |
numberOfSteps* | '-' | Used to determine which tooltip will be shown. If `numberOfSteps > 1` then the multi-step tooltip will be shown else the stand-alone tooltip will be shown. This number will only be displayed in the multi-step tooltip. | number |
onDismiss | () => {} | Callback fired when the dismiss(X) button is clicked or when the `Esc` key is pressed. This only applies to the multi-step tooltip. | () => void |
onEnter | '-' | Callback fired before the "entering" status is applied. An extra parameter `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount | (isAppearing: boolean) => void |
onEntered | '-' | Callback fired after the "entered" status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount | (isAppearing: boolean) => void |
onEntering | '-' | Callback fired after the "entering" status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount | (isAppearing: boolean) => void |
onExit | '-' | Callback fired before the "exiting" status is applied. | () => void |
onExited | '-' | Callback fired after the "exited" status is applied. | () => void |
onExiting | '-' | Callback fired after the "exiting" status is applied. | () => void |
onPrimaryButtonClick | () => {} | Callback fired when the primary button is clicked. This applies to both the stand-alone and multi-step tooltip. This is also fired when the `Esc` key is pressed in the stand-alone tooltip. | () => void |
open* | false | Determines if the `Tooltip` will appear as open or close. | boolean |
refEl* | '-' | Reference to an element that the tooltip should be positioned against. | RefObject<HTMLElement> |
setOpen* | '-' | Callback to change the open state of the Tooltip. | Dispatch<SetStateAction<boolean>> |
spacing | '-' | Specifies the amount of spacing (in pixels) between the trigger element and the Popover content. default: `4` | number |
tooltipAlign | Align.Top | Determines the alignment of the tooltip. | "top", "bottom", "left", "right" |
tooltipClassName | '-' | ClassName to be applied to the tooltip element. | string |
tooltipJustify | Justify.Middle | Determines the justification of the tooltip. | "start", "middle", "end" |
...rest | |||