From cc76c8dd22c09763a769c0850e7555fc8effab60 Mon Sep 17 00:00:00 2001 From: Jordan Burke Date: Mon, 7 Jul 2014 21:57:25 -0400 Subject: [PATCH] Updated the readme. --- README.md | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 8af448b..f819eb5 100644 --- a/README.md +++ b/README.md @@ -3,25 +3,34 @@ angular-help-overlay Angular Wrapper for [chardin.js](https://github.com/heelhook/chardin.js "Chardin.js") instruction overlay which was inspired by the "new" Gmail composer tour. -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: +Include the angular-help-overlay js file (min or source), chardin.js, and chardin.css. Then install the module to your app: ``` +angular.module('YourApp', ['angulartics', '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: + +```HTML ... ``` 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: +```HTML +
...
``` -
...
-``` + +`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, help-overlay-start and help-overlay-stop: -``` +```HTML ... ```