### Create a Step-by-Step Guide with Boarding.js

Source: https://github.com/josias-r/boarding.js/blob/master/readme.md

Illustrates the creation of a multi-step onboarding guide using Boarding.js. This involves initializing the Boarding instance and then defining an array of `stepDefinition` objects, which are passed to the `defineSteps` method.

```javascript
const boardingOptions = {
  // ... Boarding initialization options
};
const stepDefinition1 = {
  element: "#step1",
  // ...
};
const stepDefinition2 = {
  element: "#step2",
  // ...
};
const stepDefinition3 = {
  element: "#step3",
  // ...
};
const stepDefinition4 = {
  element: "#step4",
  // ...
};

const boarding = new Boarding(boardingOptions);
boarding.defineSteps([
  stepDefinition1,
  stepDefinition2,
  stepDefinition3,
  stepDefinition4,
]);
```

--------------------------------

### Define Multi-Step Feature Introductions with JavaScript

Source: https://github.com/josias-r/boarding.js/blob/master/index.html

Create guided tours or feature introductions by defining an array of steps. Each step targets a specific element and can include popover configurations for title, description, and preferred position. The introduction is started using `boarding.start()`.

```javascript
const boarding = new Boarding();
// Define the steps for introduction
bording.defineSteps([
  {
    element: '#first-element-introduction',
    popover: {
      className: 'first-step-popover-class',
      title: 'Title on Popover',
      description: 'Body of the popover',
      prefferedPosition: 'left'
    }
  },
  {
    element: '#second-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      prefferedPosition: 'top'
    }
  },
  {
    element: '#third-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      prefferedPosition: 'right'
    }
  },
]);
// Start the introduction
bording.start();
```

--------------------------------

### Install Boarding.js using npm or yarn

Source: https://context7.com/josias-r/boarding.js/llms.txt

These commands show how to install the Boarding.js library into your project using either npm or yarn package managers.

```bash
npm install boarding.js
# or
yarn add boarding.js
```

--------------------------------

### Install Boarding.js using npm or yarn

Source: https://github.com/josias-r/boarding.js/blob/master/readme.md

This snippet shows how to add the boarding.js library to your project using either npm or yarn package managers. These commands fetch and install the library, making it available for import in your project.

```bash
yarn add boarding.js
npm install boarding.js
```

--------------------------------

### Create Step-by-Step Tours with Boarding.js

Source: https://context7.com/josias-r/boarding.js/llms.txt

This snippet details how to define and manage multi-step guided tours. It includes setting tour-wide options like button text, enabling keyboard control, and defining individual steps with their associated popovers. It also covers starting the tour and programmatic navigation.

```javascript
import { Boarding } from "boarding.js";

const boarding = new Boarding({
  animate: true,
  padding: 10,
  allowClose: false,
  keyboardControl: true,
  doneBtnText: "Finish",
  nextBtnText: "Next →",
  prevBtnText: "← Back"
});

boarding.defineSteps([
  {
    element: "#dashboard",
    popover: {
      className: "intro-step",
      title: "Welcome to Dashboard",
      description: "This is your main workspace where all your data is displayed.",
      prefferedSide: "bottom"
    }
  },
  {
    element: "#analytics-tab",
    popover: {
      title: "Analytics",
      description: "View detailed reports and metrics here.",
      prefferedSide: "right"
    }
  },
  {
    element: "#settings-icon",
    popover: {
      title: "Settings",
      description: "Customize your preferences and account settings.",
      prefferedSide: "left",
      showButtons: ["close", "next", "previous"]
    }
  }
]);

// Start from beginning
boarding.start();

// Or start from specific step (0-indexed)
boarding.start(1);

// Programmatic navigation
boarding.next();
boarding.previous();

// Check navigation availability
if (boarding.hasNextStep()) {
  boarding.next();
}
```

--------------------------------

### Boarding.js Initialization and Basic API Methods

Source: https://github.com/josias-r/boarding.js/blob/master/index.html

Demonstrates how to initialize the Boarding.js library with options and utilize core methods for controlling the tour. This includes checking activation status, navigating through steps, starting the tour, and resetting its state. Dependencies include the Boarding.js library itself.

```javascript
const boardingOptions = {
  // Your options here
};
const boarding = new Boarding(boardingOptions);

const isActivated = boarding.isActivated; // Checks if the boarding is active or not
bloardings.next(); // Moves to next step in the steps list
bloardings.previous(); // Moves to previous step in the steps list
bloardings.start(stepNumber = 0); // Starts driving through the defined steps
bloardings.reset(); // Resets the overlay and clears the screen
```

--------------------------------

### JavaScript: Control Tour State and Navigate with Boarding.js

Source: https://context7.com/josias-r/boarding.js/llms.txt

Demonstrates programmatic control of tour state using Boarding.js. This includes defining steps, checking activation status, getting the current step, starting, navigating (next/previous), checking navigation availability, accessing highlighted elements and popovers, resetting the tour, and a comprehensive TourManager class example with local storage integration for progress saving.

```javascript
import { Boarding } from "boarding.js";

const boarding = new Boarding();

boarding.defineSteps([
  { element: "#step1", popover: { title: "Step 1", description: "First" } },
  { element: "#step2", popover: { title: "Step 2", description: "Second" } },
  { element: "#step3", popover: { title: "Step 3", description: "Third" } }
]);

// Check if tour is active
if (boarding.isActivated) {
  console.log("Tour is running");
}

// Get current step index (0-based)
console.log(`Current step: ${boarding.currentStep}`);

// Start tour
boarding.start();      // Start at step 0
boarding.start(1);     // Start at step 1

// Navigate programmatically
boarding.next();       // Move to next step
boarding.previous();   // Move to previous step

// Check navigation availability
if (boarding.hasNextStep()) {
  console.log("Can move forward");
  boarding.next();
}

if (boarding.hasPreviousStep()) {
  console.log("Can move backward");
  boarding.previous();
}

// Get highlighted element
if (boarding.hasHighlightedElement()) {
  const highlightedEl = boarding.getHighlightedElement();
  console.log("Highlighted:", highlightedEl.getElement());

  // Get popover instance
  const popover = highlightedEl.getPopover();
  console.log("Has popover:", !!popover);
}

// Get previously highlighted element
const lastEl = boarding.getLastHighlightedElement();
console.log("Last highlighted:", lastEl?.getElement());

// Get defined steps
const steps = boarding.getSteps();
console.log(`Total steps: ${steps.length}`);

// Reset tour
boarding.reset();         // With animation
boarding.reset(true);     // Immediate, no animation

// Complete tour management example
class TourManager {
  constructor() {
    this.boarding = new Boarding({
      onStart: () => this.onTourStart(),
      onReset: (el, reason) => this.onTourEnd(reason)
    });
  }

  initializeTour(steps) {
    this.boarding.defineSteps(steps);
  }

  startTour() {
    // Check if user has seen tour
    if (localStorage.getItem("tourCompleted")) {
      console.log("Tour already completed");
      return;
    }

    // Resume from saved position
    const savedStep = parseInt(localStorage.getItem("tourStep") || "0");
    this.boarding.start(savedStep);
  }

  onTourStart() {
    console.log("Tour started");
    document.body.classList.add("tour-active");

    // Save progress periodically
    this.saveInterval = setInterval(() => {
      if (this.boarding.isActivated) {
        localStorage.setItem("tourStep", this.boarding.currentStep);
      }
    }, 1000);
  }

  onTourEnd(reason) {
    clearInterval(this.saveInterval);
    document.body.classList.remove("tour-active");

    if (reason === "finish") {
      localStorage.setItem("tourCompleted", "true");
      localStorage.removeItem("tourStep");
    }
  }

  skipToStep(stepIndex) {
    if (this.boarding.isActivated) {
      this.boarding.reset(true);
    }
    this.boarding.start(stepIndex);
  }

  restartTour() {
    localStorage.removeItem("tourCompleted");
    localStorage.removeItem("tourStep");
    this.startTour();
  }
}

// Usage
const tourManager = new TourManager();
tourManager.initializeTour([
  { element: "#step1", popover: { title: "Step 1", description: "First" } },
  { element: "#step2", popover: { title: "Step 2", description: "Second" } }
]);
tourManager.startTour();

```

--------------------------------

### Initialize and Control Boarding.js Tour

Source: https://github.com/josias-r/boarding.js/blob/master/readme.md

Demonstrates how to initialize the Boarding.js library with options and control the tour flow. This includes checking activation status, defining steps, starting the tour, navigating between steps, and preventing/continuing moves. It's crucial to manage the move prevention for asynchronous operations.

```javascript
const boarding = new Boarding(boardingOptions);

// Checks if the boarding is active or not
if (boarding.isActivated) {
  console.log("Boarding is active");
}

// In case of the steps guide, you can call below methods
boarding.defineSteps([stepDefinition1, stepDefinition2, stepDefinition3]);
boarding.start((stepNumber = 0)); // Starts driving through the defined steps
boarding.next(); // Moves to next step in the steps list
boarding.previous(); // Moves to previous step in the steps list
boarding.hasNextStep(); // Checks if there is next step to move to
boarding.hasPreviousStep(); // Checks if there is previous step to move to

// Prevents the current move. Useful in `prepareElement`, `onNext`, `onPrevious` if you want to
// perform some asynchronous task and manually move to next step
boarding.preventMove();
boarding.continue(); // Continue the move that was prevented using preventMove
boarding.clearMovePrevented(); // preventMove will just "pause" the tour. If you want to clear that paused state, you can call clearMovePrevented, to clean up that paused state. You should do this, when your logic has a condition where it never calls continue
```

--------------------------------

### Handling Asynchronous Actions Between Tour Steps in JavaScript

Source: https://github.com/josias-r/boarding.js/blob/master/readme.md

Demonstrates how to manage asynchronous operations between tour steps using `boarding.preventMove()` and `boarding.continue()`. This is useful for waiting for actions like API calls or element creations before proceeding to the next step. The example uses `setTimeout` to simulate a delay before continuing the tour.

```javascript
const boarding = new Boarding();

// Define the steps for introduction
boarding.defineSteps([
  {
    element: "#first-element-introduction",
    popover: {
      title: "Title on Popover",
      description: "Body of the popover",
      prefferedSide: "left",
    },
  },
  {
    element: "#second-element-introduction",
    popover: {
      title: "Title on Popover",
      description: "Body of the popover",
      prefferedSide: "top",
    },
    onNext: () => {
      // Prevent moving to the next step
      boarding.preventMove();

      // Perform some action or create the element to move to
      // And then move to that element
      setTimeout(() => {
        boarding.continue();
      }, 4000);
    },
  },
  {
    element: "#third-element-introduction",
    popover: {
      title: "Title on Popover",
      description: "Body of the popover",
      prefferedSide: "right",
    },
  },
]);

// Start the introduction
boarding.start();
```

--------------------------------

### Use Lifecycle Callbacks and Event Hooks in Boarding.js

Source: https://context7.com/josias-r/boarding.js/llms.txt

This example demonstrates how to integrate custom behavior into user tours using lifecycle callbacks and event hooks provided by `boarding.js`. It showcases global callbacks like `onStart`, `onHighlighted`, and `onReset`, as well as step-specific overrides for actions like `onNext` and `onPrevious`.

```javascript
import { Boarding } from "boarding.js";

const boarding = new Boarding({
  // Global callbacks (apply to all steps)
  onStart: (element) => {
    console.log("Tour started");
    document.body.classList.add("tour-active");
  },
  onBeforeHighlighted: (element) => {
    console.log("About to highlight:", element.getElement());
    // Add custom animation class
    element.getElement().classList.add("pulse-animation");
  },
  onHighlighted: (element) => {
    console.log("Element fully highlighted:", element.getElement());
    // Track analytics
    trackEvent("element_highlighted", { elementId: element.getElement().id });
  },
  onDeselected: (element) => {
    console.log("Element deselected:", element.getElement());
    element.getElement().classList.remove("pulse-animation");
  },
  onReset: (element, exitReason) => {
    console.log(`Tour ended: ${exitReason}`); // exitReason: 'cancel' or 'finish'
    document.body.classList.remove("tour-active");

    if (exitReason === "finish") {
      // User completed the tour
      localStorage.setItem("tourCompleted", "true");
      showThankYouMessage();
    } else {
      // User cancelled the tour
      localStorage.setItem("tourCancelled", "true");
    }
  }
});

boarding.defineSteps([
  {
    element: "#step1",
    popover: {
      title: "Step 1",
      description: "First step"
    },
    // Step-specific callbacks (override global callbacks)
    onHighlighted: (element) => {
      console.log("Custom behavior for step 1");
      playWelcomeSound();
    },
    onNext: () => {
      console.log("Moving from step 1 to step 2");
      saveProgress("step1_completed");
    },
    onPrevious: () => {
      console.log("Going back from step 1");
    }
  },
  {
    element: "#step2",
    popover: {
      title: "Step 2",
      description: "Second step"
    }
  }
]);

boarding.start();

function trackEvent(eventName, data) {
  console.log(`Analytics: ${eventName}`, data);
}

function showThankYouMessage() {
  console.log("Thank you for completing the tour!");
}

function playWelcomeSound() {
  // Play audio
}

function saveProgress(step) {
  localStorage.setItem("tourProgress", step);
}

```

--------------------------------

### Check and Get Highlighted Elements with Boarding.js

Source: https://github.com/josias-r/boarding.js/blob/master/readme.md

Explains how to check if an element is currently highlighted by Boarding.js and how to retrieve the currently or last highlighted element. These methods are useful for understanding the current state of the tour's visual feedback.

```javascript
// Checks if there is any highlighted element
if (boarding.hasHighlightedElement()) {
  console.log("There is an element highlighted");
}

// Gets the currently highlighted element on screen
// It would be an instance of `/src/core/highlight-element.ts`
const activeElement = boarding.getHighlightedElement();

// Gets the last highlighted element, would be an instance of `/src/core/highlight-element.ts`
const lastActiveElement = boarding.getLastHighlightedElement();
```

--------------------------------

### Positioning Popover with Preferred Side and Alignment in JavaScript

Source: https://github.com/josias-r/boarding.js/blob/master/readme.md

Demonstrates how to manually set the preferred side (left, right, top, bottom) and alignment (start, center, end) for a popover element. This allows for fine-grained control over the popover's placement relative to the highlighted element. It requires the Boarding.js library to be initialized.

```javascript
const boarding = new Boarding();
boarding.highlight({
  element: "#some-element",
  popover: {
    title: "Title for the Popover",
    description: "Description for it",
    // prefferedSide can be left, right, top, bottom
    prefferedSide: "left",
    // alignment can be start, center, right
    alignment: "center",
  },
});
```

--------------------------------

### Focus Element on Event - JavaScript

Source: https://github.com/josias-r/boarding.js/blob/master/index.html

This example shows how to use Boarding.js to focus on an element when a specific user event occurs, such as an input element gaining focus. It attaches an event listener to an element and, when the event fires, uses the `focus` method of the Boarding instance to highlight the target element. This is ideal for dynamic user interfaces.

```javascript
const focusBoarding = new Boarding();

// Highlight the section on focus
document.getElementById('creation-input')
  .addEventListener('focus', (e) => {
    focusBoarding.focus('#creation-input');
  });

```

--------------------------------

### Implement Keyboard Navigation for Boarding.js Tours

Source: https://context7.com/josias-r/boarding.js/llms.txt

Enable keyboard controls for accessible tours, including navigation with arrow keys and closing with the ESC key. Examples show how to enable/disable keyboard controls globally and for specific steps, as well as how to implement custom keyboard event handling.

```javascript
import { Boarding } from "boarding.js";

const boarding = new Boarding({
  keyboardControl: true,    // Enable keyboard navigation
  allowClose: true          // ESC key closes tour when true
});

// Keyboard shortcuts available:
// - ESC: Close/cancel tour (if allowClose: true)
// - Arrow Right: Next step (if next button is enabled)
// - Arrow Left: Previous step (if previous button is enabled)

bording.defineSteps([
  {
    element: "#step1",
    popover: {
      title: "Keyboard Accessible",
      description: "Use arrow keys to navigate, ESC to exit",
      showButtons: true,
      disableButtons: []  // All buttons enabled, arrow keys work
    }
  },
  {
    element: "#step2",
    popover: {
      title: "Step 2",
      description: "Arrow Left to go back",
      showButtons: ["previous", "next"],
      disableButtons: ["next"]  // Arrow Right won't work on this step
    }
  }
]);

bording.start();

// Disable keyboard for specific scenarios
const manualBoarding = new Boarding({
  keyboardControl: false,  // Disable keyboard, use only buttons/API
  allowClose: false
});

manualBoarding.defineSteps([
  {
    element: "#guided-step",
    popover: {
      title: "Click Only",
      description: "Use the buttons below to navigate",
      showButtons: ["next"]
    }
  }
]);

// Custom keyboard handling
document.addEventListener("keydown", (e) => {
  if (boarding.isActivated) {
    if (e.key === "Enter") {
      // Custom: Enter key advances tour
      boarding.next();
    } else if (e.key === "Backspace") {
      // Custom: Backspace goes back
      e.preventDefault();
      boarding.previous();
    }
  }
});

```

--------------------------------

### Set Popover Position and Alignment in JavaScript

Source: https://github.com/josias-r/boarding.js/blob/master/index.html

Control the placement and alignment of the popover relative to the highlighted element. You can specify preferred positions like 'top', 'bottom', 'left', 'right' and alignments such as 'start', 'center', 'end'. If 'auto' is set or no position is specified, the library will automatically determine the best fit.

```javascript
const boarding = new Boarding();
bording.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    // prefferedPosition can be top, bottom, left, right
    prefferedPosition: 'left',
    // alignment can be start, center, end
    alignment: "start"
  }
});
```

--------------------------------

### Creating Feature Introductions with Boarding.js in JavaScript

Source: https://github.com/josias-r/boarding.js/blob/master/readme.md

Shows how to define a series of steps for a feature introduction tour. Each step targets a specific element and includes popover content (title, description, and preferred side). The tour is initiated by calling the `boarding.start()` method after defining all steps with `boarding.defineSteps()`.

```javascript
const boarding = new Boarding();

// Define the steps for introduction
boarding.defineSteps([
  {
    element: "#first-element-introduction",
    popover: {
      className: "first-step-popover-class",
      title: "Title on Popover",
      description: "Body of the popover",
      prefferedSide: "left",
    },
  },
  {
    element: "#second-element-introduction",
    popover: {
      title: "Title on Popover",
      description: "Body of the popover",
      prefferedSide: "top",
    },
  },
  {
    element: "#third-element-introduction",
    popover: {
      title: "Title on Popover",
      description: "Body of the popover",
      prefferedSide: "right",
    },
  },
]);

// Start the introduction
boarding.start();
```

--------------------------------

### Initialize Boarding.js with Options

Source: https://github.com/josias-r/boarding.js/blob/master/readme.md

Initializes a new Boarding instance with various configuration options. These options control the appearance and behavior of the onboarding overlay and popovers, such as animation, opacity, padding, button texts, and event callbacks. Dependencies include the Boarding.js library itself.

```javascript
const boarding = new Boarding({
  className: "scoped-class", // className to wrap boarding.js popover
  animate: true, // Whether to animate or not
  opacity: 0.75, // Overlay opacity (0 means only popovers and without overlay)
  padding: 10, // Distance of element from around the edges
  allowClose: true, // Whether the click on overlay should close or not
  overlayClickNext: false, // Whether the click on overlay should move next
  overlayColor: "rgb(0,0,0)", // Fill color for the overlay
  doneBtnText: "Done", // Text on the final button
  closeBtnText: "Close", // Text on the close button for this step
  nextBtnText: "Next", // Next button text for this step
  prevBtnText: "Previous", // Previous button text for this step
  showButtons: false, // Do not show control buttons in footer
  keyboardControl: true, // Allow controlling through keyboard (escape to close, arrow keys to move)
  scrollIntoViewOptions: {
    behaviour: "smooth",
  }, // We use `scrollIntoView()` when possible, pass here the options for it if you want any. Alternatively, you can also disable this functionallity by setting scrollIntoViewOptions to "no-scroll"
  onBeforeHighlighted: (HighlightElement) => {}, // Called when element is about to be highlighted
  onHighlighted: (HighlightElement) => {}, // Called when element is fully highlighted
  onDeselected: (HighlightElement) => {}, // Called when element has been deselected
  onReset: (HighlightElement) => {}, // Called when overlay is about to be cleared
  onStart: (HighlightElement) => {}, // Called when `boarding.start()` was called
  onNext: (HighlightElement) => {}, // Called when moving to next step on any step
  onPrevious: (HighlightElement) => {}, // Called when moving to previous step on any step
  strictClickHandling: true, // Can also be `"block-all"` or if not wanted at all, `false`. Either block ALL pointer events, or isolate pointer-events to only allow on the highlighted element (`true`). Popover and overlay pointer-events are of course always allowed to be clicked
  // Make changes to the actual popoverElements once they get rendered.
  onPopoverRender: (el) => {
    // ...
  },
});
```

--------------------------------

### Boarding Instance Initialization

Source: https://github.com/josias-r/boarding.js/blob/master/index.html

Initialize a new Boarding instance with provided options.

```APIDOC
## Boarding Instance Initialization

### Description
Initializes a new Boarding instance. This is the primary object used to control the tour.

### Method
`new Boarding(boardingOptions)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **boardingOptions** (object) - Required - An object containing configuration options for the tour.

### Request Example
```javascript
const boardingOptions = {
  // ... configuration options
};
const boarding = new Boarding(boardingOptions);
```

### Response
#### Success Response (200)
- **boarding** (object) - The initialized Boarding instance.

#### Response Example
```javascript
// The result is an instance of Boarding, not a direct response object.
```
```

--------------------------------

### Define a Single Step for Highlighting

Source: https://github.com/josias-r/boarding.js/blob/master/readme.md

Defines a single step configuration for the Boarding.js library, specifying the element to highlight and its associated popover content. The popover can include a title, description, custom button texts, preferred side, alignment, and a render callback. This definition can be passed directly to the `highlight` method.

```javascript
const stepDefinition = {
  element: "#some-item", // Query selector string or Node to be highlighted
  popover: {
    // There will be no popover if empty or not given
    className: "popover-class", // className to wrap this specific step popover in addition to the general className in Boarding options
    title: "Title", // Title on the popover
    description: "Description", // Body of the popover
    showButtons: false, // Do not show control buttons in footer
    doneBtnText: "Done", // Text on the last button
    closeBtnText: "Close", // Text on the close button
    nextBtnText: "Next", // Next button text
    prevBtnText: "Previous", // Previous button text
    preferredSide: "top", // Preffered side on which the popover should render of the HighlightElement
    alignment: "start", // Alignment of the popover on the side it gets renderd on
    // Make changes to the actual popoverElements once they get rendered.
    onPopoverRender: (el) => {
      // ...
    },
  },
  prepareElement: () => {}, // Called *before* moving to this step (for both cases when coming from "onNext" or "onPrevious")
  onNext: (Element) => {}, // Overwrite the original onX eventhandlers for the current step. Same for on[Previous/Highlighted/BeforeHighlighted/Deselected]
};
```

--------------------------------

### Highlight a Single Element with Boarding.js

Source: https://github.com/josias-r/boarding.js/blob/master/readme.md

Demonstrates how to highlight a single element on the page using Boarding.js. It involves initializing the Boarding instance with options and then calling the `highlight` method with a `stepDefinition` object.

```javascript
const boardingOptions = {
  // ... Boarding initialization options
};
const stepDefinition = {
  element: "#some-item",
  // ... other step definition options
};

const boarding = new Boarding(boardingOptions);
boarding.highlight(stepDefinition);
```

--------------------------------

### Highlight Element with Popover using Boarding.js

Source: https://github.com/josias-r/boarding.js/blob/master/readme.md

This JavaScript code demonstrates how to highlight an element and simultaneously display a popover with a title and description next to it using Boarding.js. The `popover` option within the `highlight` method allows for rich contextual information to be presented to the user.

```javascript
const boarding = new Boarding();
boarding.highlight({
  element: "#some-element",
  popover: {
    title: "Title for the Popover",
    description: "Description for it",
  },
});
```

--------------------------------

### Highlight and Reset Boarding.js Overlay

Source: https://github.com/josias-r/boarding.js/blob/master/readme.md

Shows how to highlight specific elements on the screen using Boarding.js and how to reset the overlay. The highlight method can accept a query selector string or a step definition. The reset method clears the screen and overlay, with an option to perform it immediately without animations.

```javascript
// Highlights the element using query selector or the step definition
boarding.highlight(string | stepDefinition);

// Resets the overlay and clears the screen
boarding.reset();

// Additionally you can pass a boolean parameter
// to clear immediately and not do the animations etc
// Could be useful when you, let's say, want to run
// a different instance of boarding while one was running
// TODO: currently reset is always "immediate" since there is no out-animation
boarding.reset((clearImmediately = false));
```

--------------------------------

### Import Boarding.js and CSS from CDN

Source: https://github.com/josias-r/boarding.js/blob/master/readme.md

This HTML snippet demonstrates how to include Boarding.js and its necessary CSS files directly from a CDN. This method is useful for quick integration without a build process, allowing immediate use of the library's features.

```html
<script type="module">
  import { Boarding } from "https://unpkg.com/boarding.js/dist/main.js";
</script>
<link rel="stylesheet" href="https://unpkg.com/boarding.js/styles/main.css" />
<!-- optionally include the base theme -->
<link
  rel="stylesheet"
  href="https://unpkg.com/boarding.js/styles/themes/basic.css"
/>
```

--------------------------------

### Create Feature Introductions Without Overlays using JavaScript

Source: https://github.com/josias-r/boarding.js/blob/master/index.html

Disable the visual overlay that typically covers the rest of the page during a highlighted step. By setting the `opacity` option to `0` when initializing Boarding.js, you can create introductions or highlights without obscuring the underlying content.

```javascript
const boarding = new Boarding({
    opacity: 0,
});

bording.highlight({
  element: '#run-element-without-popover',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    prefferedPosition: 'top', // can be `top`, `left`, `right`, `bottom`
  }
});
```

--------------------------------

### Boarding.js Configuration Options

Source: https://github.com/josias-r/boarding.js/blob/master/index.html

Provides an overview of the various configuration options available when initializing a Boarding instance. These options control aspects like styling, animations, button text, event handling, and overlay behavior.

```javascript
const boarding = new Boarding({
  className: 'scoped-class', // className to wrap boarding.js popover
  animate: true, // Animate while changing highlighted element
  opacity: 0.75, // Overlay opacity (0 means only popovers and without overlay)
  padding: 10, // Distance of element from around the edges
  allowClose: true, // Whether clicking on overlay should close or not
  overlayClickNext: false, // Should it move to next step on overlay click
  overlayColor: 'rgb(0,0,0)', // Fill color for the overlay
  doneBtnText: 'Done', // Text on the final button
  closeBtnText: 'Close', // Text on the close button for this step
  nextBtnText: 'Next', // Next button text for this step
  prevBtnText: 'Previous', // Previous button text for this step
  showButtons: false, // Do not show control buttons in footer
  keyboardControl: true, // Allow controlling through keyboard (escape to close, arrow keys to move)
  scrollIntoViewOptions: {
    behaviour: "smooth",
  }, // We use `scrollIntoView()` when possible, pass here the options for it if you want any. Alternatively, you can also disable this functionallity by setting scrollIntoViewOptions to "no-scroll"
  onBeforeHighlighted: (Element) => {}, // Called when element is about to be highlighted
  onHighlighted: (Element) => {}, // Called when element is fully highlighted
  onDeselected: (Element) => {}, // Called when element has been deselected
  onReset: (Element) => {}, // Called when overlay is about to be cleared
  onStart: (Element) => {}, // Called when `boarding.start()` was called
  onNext: (Element) => {}, // Called when moving to next step on any step
  onPrevious: (Element) => {}, // Called when moving to next step on any step
  strictClickHandling: "block-all", // Can also be `true` or if not wanted at all, `false`. Either block ALL pointer events, or isolate pointer-events to only allow on the highlighted element (`true`). Popover and overlay pointer-events are of course always allowed to be clicked
  // Make changes to the actual popoverElements once they get rendered.
  onPopoverRender: (el) => {
    // ...
  },

});

```

--------------------------------

### Boarding Instance Methods

Source: https://github.com/josias-r/boarding.js/blob/master/index.html

Methods available on the Boarding instance to control the tour flow and state.

```APIDOC
## Boarding Instance Methods

### Description
Provides methods to interact with and control the boarding tour.

### Methods

#### `isActivated` (getter)
- **Description**: Checks if the boarding tour is currently active.
- **Returns**: `boolean`

#### `next()`
- **Description**: Moves the tour to the next step in the sequence.
- **Returns**: `void`

#### `previous()`
- **Description**: Moves the tour to the previous step in the sequence.
- **Returns**: `void`

#### `start(stepNumber = 0)`
- **Description**: Starts the tour, optionally beginning at a specific step number.
- **Parameters**:
  - **stepNumber** (number) - Optional - The index of the step to start the tour from. Defaults to 0.
- **Returns**: `void`

#### `highlight(string|stepDefinition)`
- **Description**: Highlights an element on the screen, either by its query selector (string) or a step definition object.
- **Parameters**:
  - **argument** (string|object) - Required - The query selector string or a step definition object.
- **Returns**: `void`

#### `reset()`
- **Description**: Resets the tour overlay and clears the screen.
- **Returns**: `void`

#### `hasHighlightedElement()`
- **Description**: Checks if there is currently an element highlighted.
- **Returns**: `boolean`

#### `hasNextStep()`
- **Description**: Checks if there is a next step available in the tour.
- **Returns**: `boolean`

#### `hasPreviousStep()`
- **Description**: Checks if there is a previous step available in the tour.
- **Returns**: `boolean`

#### `preventMove()`
- **Description**: Prevents the current move. Useful in callbacks like `prepareElement`, `onNext`, `onPrevious` to perform asynchronous tasks before allowing the move.
- **Returns**: `void`

#### `continue()`
- **Description**: Continues a move that was previously prevented using `preventMove()`.
- **Returns**: `void`

#### `clearMovePrevented()`
- **Description**: Clears the state of a prevented move, effectively unpausing the tour without proceeding to the next step.
- **Returns**: `void`

#### `getHighlightedElement()`
- **Description**: Gets the currently highlighted element object.
- **Returns**: `object` - The highlighted element object.

#### `getLastHighlightedElement()`
- **Description**: Gets the previously highlighted element object.
- **Returns**: `object` - The last highlighted element object.

### Request Example
```javascript
// Assuming 'boarding' is an initialized Boarding instance
if (boarding.hasNextStep()) {
  boarding.next();
}

const currentElement = boarding.getHighlightedElement();
```

### Response
#### Success Response (200)
Methods return `void` or `boolean` as described above.

#### Response Example
```javascript
// No direct response object, methods perform actions or return primitive types.
```
```

--------------------------------

### Boarding.js Element Highlighting and State Checks

Source: https://github.com/josias-r/boarding.js/blob/master/index.html

Illustrates how to highlight specific elements or steps using Boarding.js and check the current state of the tour regarding highlighted elements and step availability. This is crucial for interactive tour experiences.

```javascript
const stepDefinition = { /* ... */ };
boarding.highlight(stepDefinition); // highlights the element using the step definition
boarding.highlight('.my-element-selector'); // highlights the element using query selector

const hasHighlighted = boarding.hasHighlightedElement(); // Checks if there is any highlighted element
const hasNext = boarding.hasNextStep(); // Checks if there is next step to move to
const hasPrevious = boarding.hasPreviousStep(); // Checks if there is previous step to move to
```

--------------------------------

### Use Boarding.js via CDN in HTML

Source: https://context7.com/josias-r/boarding.js/llms.txt

Shows how to include Boarding.js in an HTML file using a CDN link, enabling its use directly in the browser without a build process. It includes importing the library and applying a basic highlight.

```html
<!-- CDN usage -->
<script type="module">
  import { Boarding } from "https://unpkg.com/boarding.js/dist/main.js";

  const boarding = new Boarding();
  boarding.highlight("#welcome-message");
</script>
<link rel="stylesheet" href="https://unpkg.com/boarding.js/styles/main.css" />
<link rel="stylesheet" href="https://unpkg.com/boarding.js/styles/themes/basic.css" />
```

--------------------------------

### Highlight a Single Element with Boarding.js

Source: https://github.com/josias-r/boarding.js/blob/master/readme.md

This JavaScript code snippet shows the basic usage of Boarding.js to highlight a single DOM element identified by its CSS selector. It initializes the Boarding instance and then calls the `highlight` method with the selector.

```javascript
const boarding = new Boarding();
boarding.highlight("#create-post");
```

--------------------------------

### Boarding.js Step Definition Options

Source: https://github.com/josias-r/boarding.js/blob/master/index.html

Details the structure and options for defining an individual step within a Boarding tour. This includes specifying the target element, customizing the popover for that specific step, and defining step-specific lifecycle callbacks.

```javascript
const stepDefinition = {
  element: '#some-item',        // Query selector string or Node to be highlighted
  popover: {                    // There will be no popover if empty or not given
    className: 'popover-class', // className to wrap this specific step popover in addition to the general className in Boarding options
    title: 'Title',             // Title on the popover
    description: 'Description', // Body of the popover
    showButtons: false,         // Do not show control buttons in footer
    closeBtnText: 'Close',      // Text on the close button for this step
    nextBtnText: 'Next',        // Next button text for this step
    prevBtnText: 'Previous',    // Previous button text for this step
    onPopoverRender: (el) => {  // Make changes to the actual popoverElements once they get rendered.
      // ...
    },
  }
  prepareElement: () => {},     // Called *before* moving to this step (for both cases when coming from "onNext" or "onPrevious")
  onNext: (Element) => {},      // Overwrite the original onX eventhandlers for the current step. Same for on[Previous/Highlighted/BeforeHighlighted/Deselected]
};

```

--------------------------------

### Configure Overlay Behavior and Styling with Boarding.js

Source: https://context7.com/josias-r/boarding.js/llms.txt

This snippet illustrates how to configure the overlay's appearance and interaction behavior in Boarding.js. It covers setting overlay opacity, color, padding, border-radius, and controlling click interactions like closing the tour by clicking the overlay or blocking clicks entirely. Dependencies include the 'boarding.js' library.

```javascript
import { Boarding } from "boarding.js";

const boarding = new Boarding({
  animate: true,
  opacity: 0.85,                    // Overlay opacity (0-1)
  overlayColor: "rgb(20, 20, 50)",  // Custom overlay color
  padding: 15,                       // Space around highlighted element
  radius: 8,                         // Border radius of cutout
  allowClose: true,                  // Click overlay to close
  overlayClickNext: false,           // Click overlay to move next (alternative to allowClose)
  strictClickHandling: true          // Block clicks outside highlighted element
});

// Example 1: Strict click handling - only highlighted element is clickable
bording.highlight({
  element: "#important-form",
  strictClickHandling: true,  // Only the form can be clicked
  popover: {
    title: "Complete This Form",
    description: "Please fill out all required fields"
  }
});

// Example 2: Block all clicks (even on highlighted element)
bording.highlight({
  element: "#demo-animation",
  strictClickHandling: "block-all",  // Nothing can be clicked, watch only
  popover: {
    title: "Watch This Demo",
    description: "Observe how the animation works"
  }
});

// Example 3: Allow all interactions
bording.highlight({
  element: "#interactive-tutorial",
  strictClickHandling: false,  // Allow clicking anywhere
  popover: {
    title: "Try It Out",
    description: "Click around and explore"
  }
});

// Example 4: Transparent overlay (only show popover)
const minimalBoarding = new Boarding({
  opacity: 0,           // No overlay, just popover
  showButtons: false,
  allowClose: false
});

minimalBoarding.highlight({
  element: "#tooltip-target",
  popover: {
    title: "Tooltip Style",
    description: "This works like a tooltip without dimming the page"
  }
});
```

--------------------------------

### Highlight Single Element (With Popover) - JavaScript

Source: https://github.com/josias-r/boarding.js/blob/master/index.html

This code snippet illustrates how to highlight an element and simultaneously display a popover with a title and description. It utilizes the `highlight` method, passing an object that includes the `element` selector and a `popover` configuration with `title` and `description` properties. This is useful for providing context or instructions related to the highlighted element.

```javascript
const boarding = new Boarding();
b oarding.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
  }
});

```

--------------------------------

### Import Boarding.js and CSS in a Module Bundler

Source: https://github.com/josias-r/boarding.js/blob/master/readme.md

This JavaScript code demonstrates how to import the Boarding.js library and its associated CSS files when using a module bundler like Webpack or Rollup. This is the standard approach for incorporating the library into modern JavaScript projects.

```javascript
import { Boarding } from "boarding.js";
import "boarding.js/styles/main.css";
// optionally include the base theme
import "boarding.js/styles/themes/basic.css";
```

--------------------------------

### Add Popovers to Highlighted Elements in Boarding.js

Source: https://context7.com/josias-r/boarding.js/llms.txt

Demonstrates how to attach informational popovers to highlighted elements. This includes setting a title, description (supporting HTML), preferred side, alignment, and which buttons to display.

```javascript
import { Boarding } from "boarding.js";

const boarding = new Boarding({
  animate: true,
  opacity: 0.75
});

boarding.highlight({
  element: "#feature-button",
  popover: {
    title: "New Feature Available",
    description: "<strong>Click here</strong> to access the new reporting dashboard. You can export data in CSV or PDF format.",
    prefferedSide: "bottom",
    alignment: "center",
    showButtons: ["close"]
  }
});

// Expected result: The #feature-button element is highlighted with an overlay,
// and a popover appears below it with the title and HTML description.
```

--------------------------------

### Import Boarding.js in JavaScript

Source: https://context7.com/josias-r/boarding.js/llms.txt

Demonstrates importing the Boarding.js library and its default CSS styles (main and an optional theme) into your JavaScript or TypeScript project.

```javascript
// Import the library and CSS
import { Boarding } from "boarding.js";
import "boarding.js/styles/main.css";
import "boarding.js/styles/themes/basic.css"; // Optional base theme
```

--------------------------------

### Highlighted Element Methods

Source: https://github.com/josias-r/boarding.js/blob/master/index.html

Methods available on a highlighted element object obtained from `getHighlightedElement()`.

```APIDOC
## Highlighted Element Methods

### Description
Provides methods to interact with a specific highlighted element within the tour.

### Methods

#### `getCalculatedPosition()`
- **Description**: Gets the calculated screen coordinates of the highlighted element.
- **Returns**: `object` - An object containing position details (e.g., `top`, `left`, `width`, `height`).

#### `hidePopover()`
- **Description**: Hides the popover associated with the highlighted element.
- **Returns**: `void`

#### `showPopover()`
- **Description**: Shows the popover associated with the highlighted element.
- **Returns**: `void`

#### `getNode()`
- **Description**: Gets the actual DOM Element corresponding to the highlighted element.
- **Returns**: `HTMLElement` - The DOM element.

### Request Example
```javascript
const highlightedElement = boarding.getHighlightedElement();

if (highlightedElement) {
  const position = highlightedElement.getCalculatedPosition();
  console.log('Element position:', position);
  // highlightedElement.hidePopover();
  // const domNode = highlightedElement.getNode();
}
```

### Response
#### Success Response (200)
Methods return `object` or `HTMLElement` as described above.

#### Response Example
```javascript
{
  "top": 100,
  "left": 50,
  "width": 200,
  "height": 40
}
// or
// <div id="myElement">...</div>
```
```

--------------------------------

### Boarding.js Move Prevention and Continuation

Source: https://github.com/josias-r/boarding.js/blob/master/index.html

Explains how to control the flow of the tour by preventing automatic step transitions and manually continuing them. This is useful for asynchronous operations within tour steps.

```javascript
// Prevents the current move. Useful in `prepareElement`, `onNext`, `onPrevious` if you want to
// perform some asynchronous task and manually move to next step
bloardings.preventMove();
bloardings.continue(); // Continue the move that was prevented using preventMove
bloardings.clearMovePrevented(); // preventMove will just "pause" the tour. If you want to clear that paused state, you can call clearMovePrevented, to clean up that paused state. You should do this, when your logic has a condition where it never calls continue
```

--------------------------------

### Highlight Single Element (No Popover) - JavaScript

Source: https://github.com/josias-r/boarding.js/blob/master/index.html

This snippet demonstrates how to highlight a single HTML element on the page using its CSS selector. It initializes the Boarding library and then calls the `highlight` method with the element's selector. This is useful for drawing attention to a specific element without additional text.

```javascript
const boarding = new Boarding();
boarding.highlight('#create-post');
```