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 'click' | 'hover' ▶︎ click The event to trigger the beacon.
hideFooter boolean ▶︎ false Hide the tooltip's footer.
isFixed boolean ▶︎ false Force the step to be fixed.
offset number ▶︎ 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 Partial<Styles> Override the styling of the step's Tooltip
target HTMLElement\|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 require an additional render to be set).
title React.Node The tooltip's title.

Common Props Inheritance

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
  • hideCloseButton
  • locale
  • showProgress
  • showSkipButton
  • spotlightClicks
  • spotlightPadding
  • styles
  • tooltipComponent
Last modified 9d ago