Documentation

This Addon for JQuery features two main functions to help you display tooltips bubbles on your website thanks to JQuery. As such, you need to load the latest version of JQuery with a <script type="text/javascript" src="jquery.min.js"></script> beforehand.

The functions included are:

.bubbleify(config)

This function shows the bubble on mouseover on the element, given certain a config map:

• text: the html to be included in the bubble in the top half, will have id='jquerybubbles_bubble_text'
• subtext: the html to be included in the bubble in the bottom half, will have id='jquerybubbles_bubble_subtext'
• side: the side of the element the bubble will appear to. Can be either 'left', 'right', 'top' or 'bottom'

.tutorialstep(config)

This function transforms an element into a step for a tutorial given a certain config map. This step can then be fired by triggering the ‘tutorial step’ event on this object. You would use .trigger(‘tutorialstep’) on the first step to launch your tutorial after it has been initialized (see example below).

• text: the text to display in the bubble (see bubbleify())
• subtext: the subtext to display in the bubble (see bubbleify())
• side: the side to wich to display the bubble, can be 'up', 'bottom', 'left' or 'right' (see bubbleify())
• next: the jQuery object that receives the next step
• finish: the event type that will accomplish this step and trigger the next
• finish_receiver: (optional) the receiver of the finish event. By default set to this object.
• finish_callback(): (optional) a function to execute once this step is finished.
• finish_condition(finish_event): (optional) a function which evaluation has to return true for the step to be considered completed. The function is passed the finish event.

---

Example

/* initialize the first step */
$(‘#1').tutorialstep({
 text: 'Hello, this is the first step!',
 subtext:'Click on this button.',
 side: 'right',
 next: $('#2'),
 finish: 'click'
});

/* initialize the second step */
$('#2').tutorialstep({
 text: 'Hello, this is the second step!',
 subtext:'Click on the first button again.',
 side: 'right',
 next: null,
 finish: ‘click',
 finish_receiver: $(‘#1'),
 finish_condition: function(){
  return true;
 }
});

/* trigger the step-by-step instructions */
$('#20').trigger('tutorialstep');