Chardin.js is a jQuery plugin that creates simple overlay instructions for web applications.
The tool solves the problem of guiding users through application features by displaying contextual instructions overlaid on page elements. It works by attaching data attributes to HTML elements that specify instruction text and tooltip positioning, then rendering an overlay with highlighted elements and accompanying tooltips when initialized. Positioning is flexible, allowing tooltips to appear on any side of an element with fine-grained offset control through percentage-based adjustments and distance multipliers.
Chardin.js suits projects that need lightweight, non-intrusive user guidance without heavy dependencies. It works well for simple feature tours and onboarding flows. The tool supports both free-form exploration mode, where users can click through instructions at their own pace, and sequential mode, where instructions appear one at a time with manual or automatic progression. Instructions can be embedded directly in HTML data attributes or loaded dynamically from an external JSON file, making it easy to maintain tour content separately from markup.
The project shows minimal ongoing development activity, with no recent commits or active maintenance visible in the repository. There are no indications of regular bug fixes, feature additions, or community engagement through issues and pull requests.
