Skip to content
Angular Wrapper for chardin.js instruction overlay
HTML CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Angular Wrapper for chardin.js instruction overlay which was inspired by the Gmail composer tour at the time.

Include the angular-help-overlay js file (min or source), chardin.js, and chardin.css. If you are using grunt and using a bowerInstall task, you probably will still need to manually include chardin.js and chardin.css yourself, however the angular-help-overlay should be injected just fine.

Next, install the module to your app:

angular.module('YourApp', ['angularHelpOverlay'])

Usage is straightforward: Find the dom element where you want to the overlay to appear (e.g., body, div, etc.) and add this tag to the element:

<body help-overlay="showHelp">...</body>

With showHelp being a scoped boolean property. Setting that property to true will enable the overlay. Since this is just an AngularJS wrapper around a jquery plugin, this directive still uses chardin.js native attribute lookups:

<div data-intro="Some Help description here" data-position="top">...</div>

data-intro: Text to show with the instructions
data-position: (left, top, right, bottom), where to place the text with respect to the element

Additionally this directive provides delegation of chardin.js start and stop events via, overlay-start-callback and overlay-stop-callback:

<body help-overlay="showHelp" overlay-start-callback="startFn(event)" overlay-stop-callback="stopFn(event)">...</body>

events being passed are the original chardin.js event objects.

Note: The chardin.js attributes will not work on elements that get replaced at compile time, particularly those that are angular directives with replace:true. The workaround for this is to enclose the directive with a simple html wrapper element (e.g., <span> or a <div>) with the chardin.js attributes on it.

The example folder contains a modified example of the original chardin.js (i.e., minus the image animate).

You can’t perform that action at this time.