jQuery Plugin For Overlay Instructions For Apps - chardin.js

chardin.js is an awesome jQuery plugin, inspired by the Gmail new composer tour, that allows you to create simple overlay to display instructions on existent elements using html5 data-* attributes. Check the demo page to see it in action.

Basic Usage:

1. Include the latest jQuery library and chardin.js on the web page

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="chardinjs.min.js"></script>

2. Include chardinjs.css to style your plugin

<link href="chardinjs.css" rel="stylesheet">

3. The html. Using html5 data-* attributes to add the instructions for your html element

<img src="img/chardin.png" data-intro="An awesome 18th-century painter, who found beauty in everyday, common things." data-position="right" /> <a href="#" class="btn btn-large primary" data-toggle="chardinjs" data-intro="This button toggles the overlay, you can click it, even when the overlay is visible" data-position="left">See it in action</a>

4. The javascript

(function() {
  $(function() {
    $('body').chardinJs();
    $('a[data-toggle="chardinjs"]').on('click', function(e) {
      e.preventDefault();
      if ($('.jumbotron img').is(':visible')) {
        return ($('body').data('chardinJs')).toggle();
      } else {
        return $('.jumbotron img').animate({
          height: 250
        }, 600, function() {
          return ($('body').data('chardinJs')).toggle();
        });
      }
    });
    
  });

}).call(this);

---

This awesome jQuery plugin is developed by heelhook. For more Advanced Usages, please check the demo page or visit the official website.