Introducing the FormBubble jQuery Plugin

Posted by Scott Greenfield | May 19, 2010

Needed Functionality

We were presented with a project that would require an overlay “bubble” object to appear with a functional form inside. The purpose of this bubble is to allow a user to enter more information than the single node would allow. We like simplicity in user interfaces, so we didn’t want to clutter up the U.I. with anything until the user actually needed to use it.

Here’s an example:

View Demo & Documentation


In this case, the form bubble appears only when the user clicks new or edit.

Why standard tooltip plugins didn’t meet our needs

The typical function of a tooltip is to appear when the user hovers over a particular element. That’s all well and good, but what if you want to wire it up to your own events? At the time we decided to create FormBubble, the plugins we found were simply incapable of doing this without a massive overhaul to their source codes. This seemed like a great excuse for making our own jQuery plugin.

Also, we needed our actionable “tooltip” to be initialized and loaded during the event and not simply when the document is ready. The reasons for this are simple: we are adding and removing elements to the DOM after the page loads, and it is not needed to bind a plugin to a massive list when the user is not likely to interact with every single list item anyway. Due to the potential for thousands of nodes to have the formBubble plugin bound to them, I choose to bind as needed. Also, it was way too much of a hassle to pass events as options which only allow for events that are supported by the jQuery.bind() function. Also, as of jQuery 1.3.2, events like “focus” were not supported by jQuery.live().

Event Binding

Below, are some code examples of the different ways events are handled in the plugins formBubble and qTip at the time the formBubble plugin was originally created. Binding events outside the plugin enables us with the flexibility we needed in this case.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//formBubble Plugin
$('#new').click(function(){, //event bound outside of the plugin (what we needed)
    $(this).formBubble({
        text: 'Hello World!'
    });
});

//qTip Plugin - event passed as a parameter and bound inside the plugin (no good)
$('#new').qtip({
   content: 'Hello World!',
   show: 'click', //event passed as a parameter and bound inside the plugin
   hide: 'mouseout' //event passed as a parameter and bound inside the plugin
});

I’ll be the first to Admit that the qTip plugin is at this moment still a superior plugin in its overall compatability, functionality, and prepackaged themes. However, it simply wasn’t flexible enough for our needs at the time. It did not have methods to programmatically close or open the tip without bugs. We used this as an opportunity to learn more about jQuery plugin development and best practices. Please note that this is a work in progress, and any tips or constructive criticism is always appreciated.

Download / Documentation