Skip to content
ts
import type { Placement, Middleware } from '@floating-ui/dom';

TourControllerPublic

ts
export interface TourControllerPublic {
  steps: TourStep[];
  currentStepIndex: number;
  isActive: boolean;
  start: (index?: number) => void;
  next: () => void;
  prev: () => void;
  jumpTo: (stepIdOrIndex: string | number) => void;
  end: () => void;
  defineSteps: (steps: TourStepDefinition[]) => void;
  updateOptions: (options: Partial<TourOptions>) => void;
}

TourStepDefinition

ts
export interface TourStepDefinition {
  target: string | HTMLElement;
  content: string | ((step: TourStep, index: number, tour: TourControllerPublic) => string | HTMLElement);
  title?: string;
  placement?: Placement;
  offsetValue?: number;
  middleware?: Middleware[];
  onBeforeShow?: (step: TourStep, index: number, tour: TourControllerPublic) => void | boolean;
  onAfterShow?: (step: TourStep, index: number, tour: TourControllerPublic) => void;
  onBeforeHide?: (step: TourStep, index: number, tour: TourControllerPublic) => void | boolean;
  onAfterHide?: (step: TourStep, index: number, tour: TourControllerPublic) => void;
  id?: string;
  [key: string]: any;
}

TourStep

ts
export interface TourStep extends TourStepDefinition {
  id: string;
}

TourOptions

ts
export interface TourOptions {
  defaultPlacement?: Placement;
  defaultOffset?: number;
  popoverClass?: string;
  arrowClass?: string;
  padding?: number;
  onTourStart?: (tour: TourControllerPublic) => void;
  onTourEnd?: (tour: TourControllerPublic) => void;
  onStepChange?: (newStep: TourStep | null, oldStep: TourStep | null, tour: TourControllerPublic) => void;
  renderPopover?: (
    step: TourStep,
    actions: { next: () => void; prev: () => void; finish: () => void },
    tour: TourControllerPublic
  ) => HTMLElement;
  highlightTarget?: boolean;
  highlightClass?: string;
  overlayClass?: string;
  overlayColor?: string;
}

Released under the MIT License.