Advanced Speech Bubble Tooltip Plugin - jQuery FlstBubble.js

File Size: 8.15 KB
Views Total: 1690
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.

  // 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>

  // 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

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


6. Customize the styles of the bubble tooltips.


  theme: { 


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


  id : "instance-1"



  id : "instance-2"



  id : "instance-3"


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


  // 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.