Lovely.IO

The Next Generation of Front-Side

Package Info

Links
Size
1.63 KB (gzipped)
Tags
UI
Author
Nikolay Nemshilov
License
MIT
Versions
CDN Links
Dependencies

Nanny

Nanny is a little package that will help you to create UI walkthroughs

Usage Basics

Firstly you'll need to add data-nanny-html attributes to the blocks where you want the helper texts to appear

<div data-nanny-html="This block does some useful thing">
  Very useful block of stuff
</div>
<div data-nanny-html="This block does something else">
  Some other block
</div>

You also can specify at which side of your block the popup should appear

<div data-nanny-html="..." data-nanny-position="left">....</div>
<div data-nanny-html="..." data-nanny-position="bottom">....</div>

Once you're done with that, just initialize the Nanny object through the Lovely interface and call the Nanny#start() method

Lovely(['nanny-1.0.0'], function(Nanny) {
  // when you're ready
  var nanny = new Nanny({options: 'here'});
  nanny.start();
});

This will start showing the helper texts over the marked blocks

Options

API Reference

The Nanny class is inherited from the standard dom.Element class and has all the same API. Plus it has two additional methods for starting and stopping the popups show

Events

Nanny objects fire the following list of events

Copyright And License

This project is released under the terms of the MIT license

Copyright (C) 2012 Nikolay Nemshilov