Guide Cues guide users through features and flows of our product

Guide Cue

Renders the component with dark mode styles.

darkMode

enum

Allows consuming applications to override font-size as set by the LeafyGreen Provider.

baseFontSize

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.

beaconAlign

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.

buttonText

string

Body content to appear inside the tooltip, under the title.

children

Enables Tooltip to trigger based on the event specified by `triggerEvent`.

enabled

Callback fired when the dismiss(X) button is clicked or when the `Esc` key is pressed. This only applies to the multi-step tooltip.

onDismiss

() => void

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.

onPrimaryButtonClick

Determines if the `Tooltip` will appear as open or close.

open

Number that controls the z-index of the popover element directly.

popoverZIndex

number

When usePortal is `true`, specifies a class name to apply to the root element of the portal.

portalClassName

When usePortal is `true`, specifies an element to portal within. The default behavior is to generate a div at the end of the document to render within.

portalContainer

HTMLElement

Reference to an element that the tooltip should be positioned against.

refEl

RefObject<HTMLElement>

When usePortal is `true`, specifies the scrollable element to position relative to.

scrollContainer

Callback to change the open state of the Tooltip.

setOpen

Dispatch<SetStateAction<boolean>>

Specifies the amount of spacing (in pixels) between the trigger element and the Popover content.

default: `10`

spacing

tooltipAlign

ClassName to be applied to the tooltip element.

tooltipClassName

Determines the justification of the tooltip.

tooltipJustify

Used to display the current step. If `numberOfSteps === 1` this number will not display.

currentStep

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.