Creating an interactive tour for a website
I would go for an approach as follows:

&lt;div id="grumble-1" data-grumble-text="my text" data-grumble-angle="60" data-grumble-distance="30" data-grumble-next="grumble-2"&gt;clickme&lt;/div&gt;

&lt;div id="grumble-2" data-grumble-text="my text 2" data-grumble-angle="30" data-grumble-distance="10"&gt;clickme&lt;/div&gt;


then some javascript fun:

var GrumblingSteps = (function(){
    var grumbleMagic = function($grumbleTarget) {
        //create grumble
        $grumbleTarget.grumble({
            text : $grumbleTarget.data('grumble-text'),
            angle : $grumbleTarget.data('grumble-angle'),
            distance : $grumbleTarget.data('grumble-distance')
        });
        //add click handler to the next in line if any
        if ( $grumbleTarget.data('grumble-next') ) {
            $nextGrumble = $('#'+$grumbleTarget.data('grumble-next'));
            $nextGrumble.on('click', function() {
                $grumbleTarget.grumble('hide');
                grumbleMagic($(this));
            });
        }
    }

    return function(firstGrumble) {
        var $firstGrumble = $(firstGrumble);
        grumbleMagic($firstGrumble);
    }
})();


Someone might be able to change this to a jQuery plugin or so. But for now you use it as follows:

GrumblingSteps('#grumble-1');



  It might have some errors in it since I coded this directly inside this comment box ;)