Skip to content

Latest commit

 

History

History
70 lines (52 loc) · 2.02 KB

step.md

File metadata and controls

70 lines (52 loc) · 2.02 KB

Step

The step is an plain object that only requires two properties to be valid: target and content (or tooltipComponent).

{
  target: '.my-selector',
  content: 'This is my super awesome feature!'
}

It will inherit some properties from the Joyride's own props that can be overridden per step:

  • beaconComponent
  • disableCloseOnEsc
  • disableOverlay
  • disableOverlayClose
  • disableScrolling
  • floaterProps (check the getMergedStep function for more information)
  • hideBackButton
  • locale
  • showProgress
  • showSkipButton
  • spotlightClicks
  • spotlightPadding
  • styles
  • tooltipComponent

And you can use these

content {React.Node|string}
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
  • center

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|string}
The tooltip's title.