linkedin/hopscotchArchived
Hopscotch
Hopscotch is a JavaScript library and framework for creating interactive product tours and user onboarding guides. It serves as a tool for building step-by-step instructional walkthroughs that highlight specific page elements and display contextual tooltips to help users navigate web application interfaces.
The library functions as a tooltip orchestrator that anchors instructional bubbles to HTML elements by calculating their position within the browser viewport. It supports the creation of branded tours through the use of custom stylesheets and markup templates for visual customization.
The framework includes capabilities for sequence management and event integration, allowing developers to trigger custom JavaScript callbacks during tour transitions to synchronize the guide with application state changes.
Features
- User Onboarding Tours - Displays a sequence of instructional tooltips and highlights to walk users through a web application.
- Guided Tour Libraries - Provides a framework that manages the sequence, layout, and animation of instructional bubbles.
- Tooltip Positioning Engines - Anchors instructional bubbles to specific HTML elements by calculating their position in the browser viewport.
- Interactive UI Walkthroughs - Creates interactive UI overlays and markers that guide users through software interfaces with step-by-step instructions.
- Onboarding Frameworks - Provides a lightweight framework for creating instructional sequences to guide new users through digital workflows.
- Product Tour Libraries - Provides a comprehensive library for building interactive, multi-step product walkthroughs.
- Sequence Management - Tracks the current step index and navigation progress to manage the linear sequence of instructional content.
- Web Interface Orientations - Helps users navigate complex web interfaces via step-by-step visual instructions and contextual help bubbles.
- Element Anchoring - Positions instructional bubbles by binding them to specific HTML elements based on their bounding boxes in the viewport.
- Tour Element Customization - Allows external stylesheets to override the default appearance of instructional bubbles via specific class names.
- Bubble Content Templates - Renders the internal HTML of bubbles using markup templates to separate instructional content from core logic.
- Tour Event Hooks - Provides lifecycle callbacks that trigger custom JavaScript logic during tour transitions to synchronize with application state.
- Tour Style Customizers - Provides tools for modifying the visual appearance and branding of tour bubbles and layouts.
- Tour Event Callbacks - Executes custom JavaScript callbacks when users reach specific milestones in a guided tour.
- Guided Tours - Framework for adding product tours.
- User Tours and Guides - Framework for adding product tours.
Star history
How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.
