LogoLogo
  • Overview
  • Props
  • Step
  • Styling
  • Custom Components
  • Callback
  • Constants
  • Accessibility
  • Migration
Powered by GitBook
On this page
  • Options
  • Common Props Inheritance

Was this helpful?

Step

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!'
}

Options

▶︎ indicates the default value if there's one

content ReactNode The tooltip's body.

data any Additional data you can add to the step.

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)

placementBeacon string ▶︎ placement The beacon's placement can be top, bottom, left, or right. If nothing is passed, it will use the placement.

title ReactNode The tooltip's title.

Common Props Inheritance

  • beaconComponent

  • disableCloseOnEsc

  • disableOverlay

  • disableOverlayClose

  • disableScrolling

  • hideBackButton

  • hideCloseButton

  • locale

  • showProgress

  • showSkipButton

  • spotlightClicks

  • spotlightPadding

  • styles

  • tooltipComponent

PreviousPropsNextStyling

Last updated 8 months ago

Was this helpful?

Check for more information.

styles Partial<Styles> Override the of the step's Tooltip

target HTMLElement|string - required The target for the step. It can be a or an HTMLElement directly (but using refs created in the same render would require an additional render to be set).

Step will inherit some properties from Joyride's own , but you can override them:

floaterProps (check the function for more information)

react-floater
styling
CSS selector
props
getMergedStep