The step is a plain object that only requires two properties to be valid: target
and content
.
{target: '.my-selector',content: 'This is my super awesome feature!'}
▶︎ indicates the default value if there's one
content {React.Node} The tooltip's body.
disableBeacon {boolean} ▶︎ false
Don't show the Beacon before the tooltip.
event {string} ▶︎ click
The event to trigger the beacon. It can be click or hover
isFixed {boolean} ▶︎ false
Force the step to be fixed.
offset {React.Node|string} ▶︎ 10
The distance from the target to the tooltip.
placement {string} ▶︎ bottom
The placement of the beacon and tooltip. It will re-position itself if there's no space available.
It can be:
top, top-start, top-end
bottom, bottom-start, bottom-end
left, left-start, left-end
right, right-start, right-end
auto (it will choose the best position)
center (set the target to body
)
Check react-floater for more information.
placementBeacon {string} ▶︎ placement
The placement of the beacon. It will use the placement if nothing is passed and it can be: top, bottom, left, right
.
styles {Object} Override the styling of the step's Tooltip
target {Element|string} - required The target for the step. It can be a CSS selector or an HTMLElement directly (but using refs created in the same render would required an additional render afterwards).
title {React.Node} The tooltip's title.
Step will inherit some properties from Joyride's own props but you can override them:
beaconComponent
disableCloseOnEsc
disableOverlay
disableOverlayClose
disableScrolling
floaterProps (check the getMergedStep function for more information)
hideBackButton
locale
showProgress
showSkipButton
spotlightClicks
spotlightPadding
styles
tooltipComponent