FORMBUBBLE BETA

Home > Resources > Tools > FormBubble

Plugin Description

FormBubble is a new light-weight jQuery plugin, weighing in at only 3.25KB minified. In addition to its small size, a huge advantage of this plugin when compared to other tooltip plugins is that nearly all of the functions can be accessed programatically. This means you can bind any of the plugin's functions to your own custom events. Also, many of the functions can be overridden.

For more information as to why this plugin was created, please read this article.

Overview, Options, Events

Attach a formBubble to any element selected with any valid jQuery Selector.

See demos below.

  • url
    • When the contents of the bubble are to be filled via AJAX, supply a valid URL.
    • Example - $('#some-element').formBubble({ url: '/test/test.htm' });
  • dataType
    • When a url has been supplied, supply a valid dataType.
    • Example - $('#some-element').formBubble({ dataType: 'json' });
  • alignment
    • Current valid alignment values are 'top', and 'top-right'.
    • Example - $('#some-element').formBubble({ alignment: 'top-right' });
  • animationSpeed
    • Any valid number (in miliseconds).
    • Example - $('#some-element').formBubble({ animationSpeed: 600 });
  • fadeOnBlur
    • Causes the bubble to be initialized in a way that the bubble is set to close when the user clicks anywhere outside of the bubble.
    • Example - $('#some-element').formBubble({ fadeOnBlur: true });
  • cache
    • Whether or not the AJAX request will be set to cache.
    • Example - $('#some-element').formBubble({ cache: true });
  • closeButton
    • Whether or not the bubble will have a close button.
    • Example - $('#some-element').formBubble({ closeButton: false });
  • slide
    • Whether or not the bubble will slide animate from one target to another.
    • Example - $('#some-element').formBubble({ slide: true });
  • onOpenCallback
    • Function that is called after the bubble is opened.
    • Example - $('#some-element').formBubble({ onOpenCallback: function(){ alert('bubble finished opening'); } });
  • onCloseCallback
    • Function that is called after the bubble is closed.
    • Example - $('#some-element').formBubble({ onCloseCallback: function(){ alert('bubble finished closing'); } });
  • text
    • Optional text contents of the form bubble. Can be called outside of the plugin or passed as an option.
    • Example - $('#some-element').formBubble({ text: 'Hello World!' }); //passed as an option during initialization
    • Or - $.fn.formBubble.text('Hello World!'); //replaces existing contents of bubble(s).
  • vOffset
    • Additional vertical offset for bubble. This is useful if you want your bubble to appear higher or lower than the default.
    • Example - $('#some-element').formBubble({ vOffset: 25 });
  • hOffset
    • Additional horizontal offset for bubble. This is useful if you want your bubble to appear further to the left or right than the default.
    • Example - $('#some-element').formBubble({ hOffset: -50 });

After a bubble has been opened, you may want another element to be able to trigger bubble events. Here are some examples of internal functions being accessed programatically from outside the plugin.

  • $.fn.formBubble.open($('#some-element'));
  • $.fn.formBubble.close();
  • $.fn.formBubble.alignTo($('#some-element'));
  • $.fn.formBubble.destroy();

Demos


Hover

This example shows how the bubble can be called with a hover event (or any event) as is seen with traditional "toolip" plugins. The difference here is the wireup is left up to you, the developer, which gives you a lot more flexability.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(document).ready(function(){

  $('#align-right').hover(function(){ //hover
    $(this).formBubble({
      closeButton: false
    });
    $.fn.formBubble.text('Bubble aligned right.');
  },function(){ //mouse out
    $.fn.formBubble.close();
  });
  
  $('#align-left').hover(function(){ //hover
    $(this).formBubble({
      alignment: {
        bubble: 'left',
        pointer: 'top-right'
      },
      slide: false,
      closeButton: false
    });
    $.fn.formBubble.text('Bubble aligned left.');
  },function(){ //mouse out
    $.fn.formBubble.close();
  });

  $('#align-right, #align-left').click(function(){
    return false;
  });

});

Ajax content

Here are two links that load external content. As opposed to passing the text value to the plugin at runtime, here we request fill the bubble with AJAX. This plugin supports both JSON and HTML get requests.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function(){

  $('#html-based').click(function(){
    var url = $(this).attr('href');
    $(this).formBubble({
      url: url,
      dataType: 'html',
      cache: false
    });
    return false;
  });
  
  $('#json-based').click(function(){
    $(this).formBubble({
      url: '/formbubble-demo/test.js',
      dataType: 'json',
      cache: false
    });
    
    return false;
  });

});

Multiple Bubbles

This example opens multiple instances of the FormBubble. After opening, try closing a couple and clicking the demo link again. Clicking the X will close them individually, but clicking the document body will close them all at once.

Demo
  • Multiple
  • Bubbles
  • Will
  • Align
  • Here
1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){

  $('#foobar5').click(function(){
    $('.foobar2').formBubble({
      text: 'targetText',
      vOffset: -6,
      unique: false
    });
    
    return false;
  });

});

Form within a form (A.K.A. Sub-form).

This is an example of a subform.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$(document).ready(function(){

  $('#foobar1').click(function(){
    var formBubbleContent, bubbleObject;
    
    $(this).formBubble({
      closeButton: false,
      fadeOnBlur: false,
      vOffset: 6
    });
    
    formBubbleContent = '<div class="form-bubble-form"><p class="dark-text">This FormBubble can only be closed by calling another form bubble or by clicking the "close" button.</p>\
                            <input type="text" value="zomg" />\
                            <br><input type="text" value="a form" /><br>\
                            <input type="text" value="within a form" />\
                            <div><input type="submit" value="Submit" />\
                            <input type="button" value="Close" /></div></div>';
    
    $.fn.formBubble.text(formBubbleContent);
    
    bubbleObject = $.fn.formBubble.bubbleObject;
    
    bubbleObject.find('input[type="submit"]').click(function(){
      alert('clicked submit');
    });
    
    bubbleObject.find('input[type="button"]').click(function(){
      $.fn.formBubble.close(bubbleObject);
    });
    
    return false;
  });

});

Callbacks

This example illustrates how to use custom callback functions. These functions are fired after the bubble opens or after it closes. We illustrate this with an animation.


If bubble is already open, we can programatically align to any element without reopening. This is done using the $.fn.formBubble.alignTo() function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$(document).ready(function(){

  $('#foobar2').click(function(){
    var foobar = $(this);
    
    foobar.formBubble({
      onOpenCallback: function(){
        foobar.animate({
          marginLeft: '-200px'
        }, 1200, function(){
          $.fn.formBubble.alignTo(foobar);
          $.fn.formBubble.text('now close me');
        });
      },
      onCloseCallback: function(){
        foobar.animate({
          marginLeft: '-5px'
        }, 1200, function(){
          $.fn.formBubble.alignTo(foobar);
        });
      }
    });
    
    $.fn.formBubble.text($(this).attr('title'));
    
    return false;
  });

});

Image content

You can see a Demo of this by hovering over the thumbnails on our client portfolio page.