# Onboarding Tour Package

A lightweight, customizable onboarding tour library for web applications that guides users through your interface with interactive tooltips and highlights.

## Features

- Interactive step-by-step tours
- Customizable tooltips with multiple positioning options
- Element highlighting with different styles (solid, dotted, dashed, pulse, glow)
- Media support (images, GIFs, videos including YouTube embeds)
- Keyboard navigation (arrow keys and Esc)
- Configurable appearance (colors, behavior)
- Completion celebration with confetti

## Installation


npm install onboarding-tour-faizu
# or
yarn add onboarding-tour-faizu

Usage

Advanced Usage with Media

import { Onboarding, OnboardingStep, OnboardingOptions } from 'onboarding-tour-faizu';

  useEffect(() => {
    const steps: OnboardingStep[] = [
  {
    element: '#upload-button',
    title: 'File Upload',
    description: 'Click here to upload your files',
    media: {
      type: 'image',
      url: '/path/to/demo-image.jpg',
      alt: 'Upload demonstration'
    },
    highlightStyle: 'pulse'
  },
  {
    element: '#video-tutorial',
    title: 'Watch Tutorial',
    description: 'Learn how to use our features',
    media: {
      type: 'video',
      url: 'https://youtu.be/C6t2nIPyjcU?si=rqjQWsP9eNjVddUm'
    }
  }
];

    const options: OnboardingOptions = {
      overlayColor: "rgba(0, 0, 0, 0.85)",
      textColor: "#333",
      backgroundColor: "white",
      allowSkip: true,
      skipOnMissingElement: true,
      allowKeyboardNavigation: true,
      onComplete: () => {
        console.log("Onboarding completed!");
        // You could add analytics tracking here
      },
    };

    const onboarding = new Onboarding(steps, options);
    
    // Start onboarding after a slight delay to ensure DOM is ready
    const timer = setTimeout(() => {
      onboarding.start();
    }, 500);

    return () => clearTimeout(timer);
  }, []);


  API Reference
OnboardingStep Interface
Property	Type	Description	Default
element	string	CSS selector for the target element	Required
title	string	Tooltip title	Required
description	string	Tooltip description	Required
position	'top'|'bottom'|'left'|'right'|'auto'	Tooltip position relative to element	'bottom'
media	object	Optional media to display in tooltip	undefined
media.type	'image'|'gif'|'video'	Media type	Required
media.url	string	Media URL	Required
media.alt	string	Alt text for media	''
highlightStyle	'solid'|'dotted'|'dashed'|'pulse'|'glow'	Element highlight style	'solid'
OnboardingOptions Interface
Property	Type	Description	Default
overlayColor	string	Color for the background overlay	'rgba(0, 0, 0, 0.7)'
textColor	string	Tooltip text color	'#333'
backgroundColor	string	Tooltip background color	'#fff'
allowSkip	boolean	Allow users to skip the tour	true
skipOnMissingElement	boolean	Skip steps if element not found	true
allowKeyboardNavigation	boolean	Enable keyboard controls	true
onComplete	function	Callback when tour completes	() => {}
Methods
start(): Begins the onboarding tour

next(): Advances to the next step

prev(): Returns to the previous step

complete(): Ends the tour early

Customization
Highlight Styles
Choose from several highlight effects:

solid: Solid colored border

dotted: Dotted border

dashed: Dashed border

pulse: Pulsing glow effect

glow: Constant glow effect

Media Support
Embed different media types in your tooltips:

Images: Regular JPG/PNG images

GIFs: Animated GIFs

Videos: MP4/webm videos with controls

YouTube: Automatic embedding of YouTube videos

Keyboard Controls
When enabled (allowKeyboardNavigation: true):

→ (Right Arrow): Next step

← (Left Arrow): Previous step

Esc: Skip tour

License
MIT © Faizu Rahman