birddog

Synopsis

Birddog is a jquery plugin for initializing a pop-up that points to the targeted element, like a tooltip. The trigger for the birddog can be remote or the targeted element. Birddog elements can be grouped together in packs and shown as a slideshow for guided tour functionality. The birddog elements take advantage of bootstrap panel styles, but bootstrap is not required if you wish to override the styles.

Code Example

An html element can be initialized as a birddog element as follows:

$('#targetElement').birddog({
                body: 'This is the body text.',
                title: 'This is the title',
                bootstrapStyle: 'success',
                pointPlacement: 'left'
            });

Content for the body of the birddog can also be in an external html file. These can be initialized as follows:

$.birddogTemplates([
                'templates/help-1.html',
                'templates/help-2.html'
            ]);

And used as follows:

$('#targetElement').birddog({
                body: 'help-1.html',
                title: 'Element 1',
                bootstrapStyle: 'primary',
                pointPlacement: 'left'
            });

To take advantage of the Duckhunt slideshow functionality, make sure to include a pack name and pack order when you initialize your birddogs:

 $('#targetElement1').birddog({
    body: 'help-1.html',
    title: 'Element 1',
    bootstrapStyle: 'success',
    pointPlacement: 'left',
    pack: 'pack1',
    packOrder: 0
});
$('#targetElement2').birddog({
    body: 'help-2.html',
    title: 'Element 2',
    bootstrapStyle: 'info',
    pointPlacement: 'right',
    pack: 'pack1',
    packOrder: 1
});

And start the Duckhunt as follows:

$.duckHunt('pack1');

The arrow keys as well as tab and backspace can be used to move through the pack in the duck hunt function. The Esc key will close it.

Motivation

The Birddog plugin was developed primarily as an online-help plugin to be incorporated into a web application.

Installation

npm install Birddog

API Reference

License

CC0 1.0 Universal