StepOptionsPosition

Defined in: step.ts:334

How a step is placed against its target, set through StepOptions.positionOptions. Shepherd positions steps itself, with no dependency on Floating UI. These cover what its offset(), flip(), shift() and strategy were used for. A centered step, one whose attachTo lacks element or on, ignores all of them.

Example

tour.addStep({
  text: 'Sticks to the header while the page scrolls.',
  attachTo: { element: '#header', on: 'bottom-start' },
  positionOptions: { offset: 12, padding: 16, strategy: 'fixed' }
});

Properties

flip?

optional flip?: boolean

Defined in: step.ts:367

Whether the step may move to the opposite side, or the opposite alignment, when attachTo.on would not fit. false keeps attachTo.on even when the step overflows. auto placements always choose their own side.

Default Value

true

---

offset?

optional offset?: number | { crossAxis?: number; mainAxis?: number; }

Defined in: step.ts:343

The gap between the step and its target, in pixels. A number moves the step away from the target. crossAxis moves it along the side it sits on, toward the end of that side, with left and right swapped in right-to-left pages for top and bottom placements. The same as Floating UI’s offset().

Default Value

0. The arrow, when shown, makes up the visible gap.

---

padding?

optional padding?: number

Defined in: step.ts:352

The least distance, in pixels, kept between the step and the edges of the viewport and of any scrolling or clipping ancestor. It applies both when choosing a side, so a step flips sooner, and when sliding the step along its side to keep it in view.

Default Value

0

---

strategy?

optional strategy?: "absolute" | "fixed"

Defined in: step.ts:359

The CSS position of the step element. Use 'fixed' when the target is itself position: fixed, such as a sticky header.

Default Value

'absolute'