Chardin.js

This module provides basic Drupal integration with Chardin.js a jQuery plugin that creates a simple overlay to display instructions on existent elements. It is inspired by the recent Gmail new composer tour.

You can view a demo of how Chardin.js works here: http://heelhook.github.io/chardin.js/

Dependencies

Libraries API

Recommended

Context and all of its dependencies.

Installation

1. Download the Chardin.js plugin (http://heelhook.github.io/chardin.js/) and extract the files under sites/all/libraries (so the result will be sites/all/libraries/chardin/chardinjs.min.js).
2. Download and enable the module.

Usage

Once the module is enabled, If you have the Context module enabled you are able to enable this modules functionality through contexts similar to the Joyride module OR add attributes to any element:

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

For Example

Create a toggle button:

<a href="#" data-toggle="chardinjs" class="my-toggle-button-class" data-intro="This chardin button shows details about this view!" data-position="right">My Chardin.js Info Button</a>

Add info to any element:

<img src="/path/to/my/cool/image.png" data-intro="This image was taken by me, is that not cool!?" data-position"bottom" />

Creators

This module was created by dobe. Sponsored by VisionTech360