Chardin.js - Simple overlay instructions

Chardin.js is a jQuery plugin that creates a simple overlay to display instructions on existent elements. It is inspired by the recent Gmail new composer tour which I loved.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Installing

Simple! Fork this repo or download chardinjs.css and chardinjs.min.js and add the following assets to your HTML:

<link href="chardinjs.css" rel="stylesheet">
<script src="chardinjs.min.js"></script>

Adding data for the instructions

Add the instructions to your elements:

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

<img src="img/chardin.png" data-intro="An awesome 18th-century painter, who found beauty in everyday, common things." data-position="right" />

Running

Once you have your elements ready you can show instructions running

$('body').chardinJs('start')

If you would rather run ChardinJs confined to a particular container (instead of using the whole document) you can change body to some other selector.

$('.container').chardinJs('start')

Methods

.chardinJs('start')

Start ChardinJs in the selector.

.chardinJs('toggle')

Toggle ChardinJs.

.chardinJs('stop')

Make your best guess. That's right! Stops ChardinJs in the selector.

Events

'chardinJs:start'

Triggered when chardinJs is correctly started.

'chardinJs:stop'

Triggered when chardinJs is stopped.