Intro.js

import introJs from "intro.js";

import introJs from "intro.js";

// Create tour instance
const tour = introJs.tour();

// Create hint instance  
const hint = introJs.hint();

const introJs = require("intro.js");

import introJs from "intro.js";

// Create and start a tour
const tour = introJs.tour()
  .addStep({
    title: "Welcome!",
    intro: "This is the main dashboard.",
    element: "#dashboard"
  })
  .addStep({  
    title: "Navigation",
    intro: "Use this menu to navigate.",
    element: ".nav-menu"
  })
  .start();

import introJs from "intro.js";

// Create and render hints
const hint = introJs.hint()
  .addHint({
    element: "#help-button",
    hint: "Click for help and support",
    hintPosition: "top-middle"
  })
  .render();

<!-- Tour steps using data attributes -->
<div data-intro="Welcome to our app!" data-step="1">Dashboard</div>
<div data-intro="Manage your settings here" data-step="2">Settings</div>

<!-- Hints using data attributes -->
<button data-hint="Save your changes">Save</button>
<input data-hint="Enter your email address" data-hint-position="top-middle">

<script>
  // Start tour from HTML attributes
  introJs.tour().start();
  
  // Render hints from HTML attributes  
  introJs.hint().render();
</script>

interface Tour {
  start(): Promise<Tour>;
  exit(force?: boolean): Promise<Tour>;
  nextStep(): Promise<Tour>;
  previousStep(): Promise<Tour>;
  addStep(step: Partial<TourStep>): Tour;
  addSteps(steps: Partial<TourStep>[]): Tour;
}

interface TourStep {
  step: number;
  title: string;
  intro: string;
  element?: Element | HTMLElement | string | null;
  position: TooltipPosition;
  scrollTo: ScrollTo;
  disableInteraction?: boolean;
  tooltipClass?: string;
  highlightClass?: string;
}

interface Hint {
  render(): Promise<Hint>;
  destroy(): Hint;
  showHint(stepId: number): Hint;
  hideHint(stepId: number): Promise<Hint>;
  addHint(hint: HintItem): Hint;
  showHintDialog(stepId: number): Promise<Hint>;
}

interface HintItem {
  element?: HTMLElement | string | null;
  hint?: string;
  hintPosition: HintPosition;
  position: TooltipPosition;
  tooltipClass?: string;
  hintAnimation?: boolean;
}

interface TourOptions {
  steps: Partial<TourStep>[];
  isActive: boolean;
  nextLabel: string;
  prevLabel: string;
  skipLabel: string;
  doneLabel: string;
  tooltipPosition: TooltipPosition;
  exitOnEsc: boolean;
  exitOnOverlayClick: boolean;
  showStepNumbers: boolean;
  keyboardNavigation: boolean;
  showButtons: boolean;
  showBullets: boolean;
  showProgress: boolean;
  scrollToElement: boolean;
  overlayOpacity: number;
  autoPosition: boolean;
  dontShowAgain: boolean;
}

interface HintOptions {
  hints: Partial<HintItem>[];
  isActive: boolean;
  tooltipPosition: string;
  hintPosition: HintPosition;
  hintButtonLabel: string;
  hintShowButton: boolean;
  hintAutoRefreshInterval: number;
  hintAnimation: boolean;
  autoPosition: boolean;
}

interface TourCallbacks {
  onBeforeChange(callback: (targetElement: HTMLElement, currentStep: number, direction: "backward" | "forward") => Promise<boolean> | boolean): Tour;
  onChange(callback: (targetElement: HTMLElement) => void | Promise<void>): Tour;
  onAfterChange(callback: (targetElement: HTMLElement) => void | Promise<void>): Tour;
  onComplete(callback: (currentStep: number, reason: "skip" | "end" | "done") => void | Promise<void>): Tour;
  onStart(callback: (targetElement: HTMLElement) => void | Promise<void>): Tour;
  onExit(callback: () => void | Promise<void>): Tour;
  onSkip(callback: (currentStep: number) => void | Promise<void>): Tour;
  onBeforeExit(callback: (targetElement: HTMLElement) => boolean | Promise<boolean>): Tour;
}

interface HintCallbacks {
  onHintsAdded(callback: () => void | Promise<void>): Hint;
  onHintClick(callback: (item: HintItem) => void | Promise<void>): Hint;
  onHintClose(callback: (item: HintItem) => void | Promise<void>): Hint;
}

type TooltipPosition = 
  | "floating" 
  | "top" 
  | "bottom" 
  | "left" 
  | "right" 
  | "top-right-aligned" 
  | "top-left-aligned" 
  | "top-middle-aligned" 
  | "bottom-right-aligned" 
  | "bottom-left-aligned" 
  | "bottom-middle-aligned";

type HintPosition = 
  | "top-left" 
  | "top-right" 
  | "top-middle" 
  | "bottom-left" 
  | "bottom-right" 
  | "bottom-middle" 
  | "middle-left" 
  | "middle-right" 
  | "middle-middle";

type ScrollTo = "off" | "element" | "tooltip";

/**
 * Legacy IntroJs class extending Tour with deprecated hint methods
 */
class LegacyIntroJs extends Tour {
  /** @deprecated Use introJs.hint().addHints() instead */
  addHints(...args: any[]): void;
  /** @deprecated Use introJs.hint().addHint() instead */
  addHint(...args: any[]): void;
  /** @deprecated Use introJs.hint().hideHints() instead */
  removeHints(...args: any[]): void;
}

/**
 * Main intro.js function - deprecated, use introJs.tour() or introJs.hint() instead
 */
declare function introJs(elementOrSelector?: string | HTMLElement): LegacyIntroJs;

declare namespace introJs {
  /**
   * Create new Tour instance for guided walkthroughs
   */
  function tour(elementOrSelector?: string | HTMLElement): Tour;
  
  /**
   * Create new Hint instance for contextual tooltips  
   */
  function hint(elementOrSelector?: string | HTMLElement): Hint;
  
  /**
   * Current package version
   */
  const version: string;
}

export default introJs;