Advanced Speech Bubble Tooltip Plugin - jQuery FlstBubble.js

The FlstBubble.js jQuery plugin helps you create animated speech bubble style tooltips from the title attribute of any element.

Also provides a Wizard feature which allows you to create an interactive, step-by-step guided tour using the bubble tooltips.

How to use it:

1. Include a theme CSS in the header.

<link rel="stylesheet" href="css/blue-theme.css" />

2. Define the tooltip content in the title attribute.

<span title="Lorem ipsum">Hover Me</span>

3. Include jQuery library and the FlstBubble.js plugin at the bottom of the page.

<script src="jquery.min.js" ></script>
<script src="FlstBubble-min.js"></script>

4. Attatch the plugin to the element and done.

$('span').flstBubble({
  // options here
});

5. Create a guided tour using the wizard feature as follows:

<span title="Step 1" class="s-1">Step 1</span>
<span title="Step 2" class="s-2">Step 2</span>
<span title="Step 3" class="s-3">Step 3</span>
<span title="Step 4" class="s-4">Step 4</span>
<span title="Step 5" class="s-5">Step 5</span>

$('span').flstBubble({

  // an array of steps for the wizard
  wizard: new Array('.s-1','.s-2','.s-3','.s-4','s-5'),

  // disables other tooltips when the wizard is activated
  showOnlyOnWizard: true ,

  // auto scrolls the page to the current step
  autoscroll:true,

  // sets the initial step from which the wizard starts
  startWizardFrom:0,
  
  // executes a function when the wizard is finished
  onFinishWizard: function (){
    // do something
  }

});

6. Customize the styles of the bubble tooltips.

$('span').flstBubble({

  theme: { 
    background:'red',
    color:'#fff' 
  }

});

7. Assian a unique ID to each instance on the page.

$('span').flstBubble({

  id : "instance-1"

});

$('a').flstBubble({

  id : "instance-2"

});

$('button').flstBubble({

  id : "instance-3"

});

8. Customize the duration of the animation. Defaults to 200.

$('span').flstBubble({

  // e.g. 'fast', 'slow', 500, etc
  duration : 'fast',

});

---

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