Step

A step is a plain object that only requires two properties: target and content.

PropertyTypeDefault

beaconPlacement

Override the beacon's placement separately from the tooltip.

Placement--

content — required

The tooltip's body.

ReactNode--

data

Additional data attached to the step. Accessible via events and custom components.

any--

id

A unique identifier for the step.

string--

isFixed

Force fixed positioning. Automatically detected for fixed/sticky targets.

booleanfalse

placement

Tooltip and beacon placement. Repositions automatically if there's no space.

Placement | 'auto' | 'center'bottom

scrollTarget

Scroll to this element instead of the target. Spotlight and tooltip still use target.

stringHTMLElement RefObject<HTMLElement | null>(() => HTMLElement | null)
--

spotlightTarget

Highlight this element instead of the target. Tooltip still anchors to target.

stringHTMLElement RefObject<HTMLElement | null>(() => HTMLElement | null)
--

target — required

The element the step points to. Accepts a CSS selector, HTMLElement, React ref, or a function that returns an element.

stringHTMLElement RefObject<HTMLElement | null>(() => HTMLElement | null)
--

title

The tooltip's title.

ReactNode--
tip

When using a ref created in the same render cycle, the element won't be available until the next render. Using a function target () => ref.current avoids this issue.

See it in action

The Basic Tour demo shows scrollTarget, spotlightTarget, and placement variants.

Inherited Props

Steps inherit all Shared Props from the Joyride component. You can override them per-step:

  • arrowComponent
  • beaconComponent
  • floatingOptions — Step-level floatingOptions are deep-merged with component-level floatingOptions.
  • loaderComponent
  • locale
  • styles
  • tooltipComponent

Per-Step Options

Steps can override any Options by setting it directly as a field on the step object.

{
  target: '.my-selector',
  content: 'Custom behavior for this step',
  // Override options for this step only:
  skipBeacon: true,
  hideOverlay: true,
  scrollOffset: 50,
  before: async () => {
    await loadData();
  },
}
Merge priority

defaults → options prop → step fields