speech bubble flst - Free Download Advanced Speech Bubble Tooltip Plugin - jQuery FlstBubble.js

Free Download Advanced Speech Bubble Tooltip Plugin – jQuery FlstBubble.js

By Posted on

This time I will share jQuery Plugin and tutorial about Advanced Speech Bubble Tooltip Plugin – jQuery FlstBubble.js, hope it will help you in programming stack.

speech bubble flst - Free Download Advanced Speech Bubble Tooltip Plugin - jQuery FlstBubble.js
File Size: 8.15 KB
Views Total: 792
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

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

2. Define the tooltip content in the title attribute.

view source
1 <span title="Lorem ipsum">Hover Me</span>

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

view source
1 <script src="jquery.min.js" ></script>
2 <script src="FlstBubble-min.js"></script>

4. Attatch the plugin to the element and done.

view source
1 $('span').flstBubble({
2   // options here
3 });

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

view source
1 <span title="Step 1" class="s-1">Step 1</span>
2 <span title="Step 2" class="s-2">Step 2</span>
3 <span title="Step 3" class="s-3">Step 3</span>
4 <span title="Step 4" class="s-4">Step 4</span>
5 <span title="Step 5" class="s-5">Step 5</span>
view source
01 $('span').flstBubble({
02  
03   // an array of steps for the wizard
04   wizard: new Array('.s-1','.s-2','.s-3','.s-4','s-5'),
05  
06   // disables other tooltips when the wizard is activated
07   showOnlyOnWizard: true ,
08  
09   // auto scrolls the page to the current step
10   autoscroll:true,
11  
12   // sets the initial step from which the wizard starts
13   startWizardFrom:0,
14    
15   // executes a function when the wizard is finished
16   onFinishWizard: function (){
17     // do something
18   }
19  
20 });

6. Customize the styles of the bubble tooltips.

view source
1 $('span').flstBubble({
2  
3   theme: {
4     background:'red',
5     color:'#fff'
6   }
7  
8 });

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

view source
01 $('span').flstBubble({
02  
03   id : "instance-1"
04  
05 });
06  
07 $('a').flstBubble({
08  
09   id : "instance-2"
10  
11 });
12  
13 $('button').flstBubble({
14  
15   id : "instance-3"
16  
17 });

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

view source
1 $('span').flstBubble({
2  
3   // e.g. 'fast', 'slow', 500, etc
4   duration : 'fast',
5  
6 });

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

source : jquery.net

Related posts: