Options

Options control theming, behavior, and timing. Set them globally via the options prop, or override per-step.

<Joyride
  options={{
    primaryColor: '#e91e63',
    hideOverlay: true,
    scrollDuration: 500,
  }}
  steps={[
    {
      target: '.my-element',
      content: 'Hello!',
      // Per-step override:
      hideOverlay: false,
    },
  ]}
/>
Merge priority

defaults → options prop → step fields

Appearance

OptionTypeDefault

backgroundColor

Tooltip background color.

string#ffffff

buttons

Buttons to show in the tooltip.

An empty array hides all buttons (footer and close).

ButtonType[]["back", "close", "primary"]

offset

Distance in pixels between the tooltip and the target.

number10

primaryColor

Primary button and beacon color.

string#000000

showProgress

Show progress in the next button (e.g., 2 of 5) in continuous tours.

booleanfalse

textColor

Tooltip text color.

string#000000

width

Tooltip width in pixels or CSS string.

string | number380

zIndex

z-index for the overlay and tooltip.

number100

Arrow

OptionTypeDefault

arrowBase

Width of the arrow base edge in pixels.

number32

arrowColor

Arrow fill color.

string#ffffff

arrowSize

Height/depth of the arrow (tip to base) in pixels.

number16

arrowSpacing

Distance between the arrow and the tooltip edge.

number12

Beacon

OptionTypeDefault

beaconSize

Beacon diameter in pixels.

number36

beaconTrigger

Interaction that opens the tooltip. 'hover' opens on mouseenter.

'click' | 'hover'click

skipBeacon

Don't show the Beacon before the tooltip.

booleanfalse

Overlay & Spotlight

OptionTypeDefault

hideOverlay

Don't show the overlay.

booleanfalse

overlayColor

Overlay backdrop color.

string#00000080

spotlightPadding

Spotlight padding around the target.

Accepts a number for all sides, or a { top, right, bottom, left } object.

number | SpotlightPadding10

spotlightRadius

Border radius of the spotlight cutout in pixels.

number4

Interactions

OptionTypeDefault

blockTargetInteraction

Block pointer events on the highlighted element.

booleanfalse

closeButtonAction

Action when the close button is clicked.

'close' advances to the next step, 'skip' ends the tour.

'close' | 'skip'close

disableFocusTrap

Disable the focus trap for the tooltip.

booleanfalse

dismissKeyAction

Action when the ESC key is pressed.

'close' closes the step, 'next' advances, false disables.

'close' | 'next' | falseclose

overlayClickAction

Action when the overlay is clicked.

'close' closes the step, 'next' advances, false disables.

'close' | 'next' | falseclose

Scrolling

OptionTypeDefault

scrollDuration

Scroll animation duration in milliseconds.

number300

scrollOffset

Scroll distance from the element scrollTop value.

number20

skipScroll

Disable scrolling to the target.

booleanfalse

Timing & Async

See it in action

The Basic Tour demo uses before and after hooks.

The Modal demo shows conditional before hooks with delays.

OptionTypeDefault

before

Async hook that runs before the step.

The tour waits for the promise to resolve and shows the loader (after loaderDelay). Capped by beforeTimeout.

(data: TourData) => Promise<void>--

after

Hook that runs after the step completes.

Fire-and-forget — does not block the tour.

(data: TourData) => void--

beforeTimeout

Max wait time (ms) for a before hook to resolve. 0 disables the timeout.

number5000

loaderDelay

Delay (ms) before showing the loader while the tour is waiting.

number300

targetWaitTimeout

Max wait time (ms) for the target element to appear. 0 disables waiting.

number1000