Form Validation Toolkit

Bubble Examples

The validation tool comes packaged with the Bubble tool that can display information in a bubble.

Features

Dependancies

The bubble tool needs the following to function:

Reference

JavaScript Initiation code with customization options:
jQuery_DOM_Element.infoBubble({
	titleText: 'data-bubble-title',		//A title for the Bubble - optional
	displayText: 'data-bubble-text',	//The information/content to be displayed
	hideDelay: 100,				//The time delay for hiding the bubble in milliseconds
	showEvent: 'focus',			//The mouse event to show the Bubble
	hideEvent: 'blur',			//The mouse event to hide the Bubble
	stopEvent: true,			//Whether to stop propagation of events above
	where: 'top', 				//Where to display the bubble relative to the element (with viewport detection). 
							Values:  top, bottom, left, right 
	autoPosition: true, 			//Override for viewport overrun detection. True for auto, False for fixed
							Values: top-right, top-left, bottom-right, bottom-left, left, right
	distanceOffset: 0, 			//How much to move away from the trigger element
	alignmentOffset: 0 			//How much to move from trigger elements left alignment
});

Applications

For Validation: The bubble is used in forms for validation messages or simply to communicate with the user within a form.

Independently: However, the Bubble tool can be used independently for any info that is appropriate to display within a bubble. Typically it should appear when an element is clicked or from other mouse events.

Examples

Following are a few examples of the Bubble tool in use as an independent module.

1. The simplest example is to use the default invokation already packaged with the validaiton.js file. Simply add a CSS class name to an element(s) and supply the info text.
<span data-info-text="Perceptible by touch. Tangible. Relating to or being the sense of touch" class="more_info">tactile</span>
Example:
2. Simplest custom example. Supply custom options:
    a. assign a specific CSS class name to an element(s) i.e. example_2,
    b. supply the content of the Bubble in the element property data-bubble-text,
    c. Initiate the Bubble by calling its jQuery DOM plug-in method infoBubble(),
    d. Supply the show and hide mouse events.

By default, the Bubble will be attached with mouseover and mouseout as the events to show and hide respectively. 
#HTML Sample
<span data-bubble-text="This is example 2" class="example_2">Example 2</span>

#JavaScript Sample
$(document).ready(function(){
	//initiate info bubble for info notices
	$('.example_2').infoBubble({
		showEvent: 'mouseenter',
		hideEvent: 'mouseout'
	});
});
Example:
3. Open and close on mouse click:
#HTML Sample
<span data-bubble-text="This is example 3" class="example_3">Example 3</span>

#JavaScript Sample
$(document).ready(function(){
	//initiate info bubble for info notices
	$('.example_3').infoBubble({
		showEvent: 'click',
		hideEvent: 'click'
	});
});
Example:
4. Passing a title:
    Assign a value (title text) to the data-bubble-title property of the trigger element.
#HTML Sample
<span data-bubble-title="Example 4 Title" data-bubble-text="This is example 4" class="example_4">Example 4</span>

#JavaScript Sample
$(document).ready(function(){
	//initiate info bubble for info notices
	$('.example_4').infoBubble({
		showEvent: 'mouseenter',
		hideEvent: 'mouseleave'
	});
});
Example:
5. Positioning: At the bottom.
Supply a fixed position value for the where option, in this case, bottom, bottom-right or bottom-left.

This is still an auto positioned, meaning, the module will adjust based on browser viewport.
#JavaScript Sample
$(document).ready(function(){
	//initiate info bubble for info notices
	$('.example_5_a').infoBubble({
		showEvent: 'mouseenter',
		hideEvent: 'mouseleave',
		where: 'bottom'
	});
	
	//initiate info bubble for info notices
	$('.example_5_b').infoBubble({
		showEvent: 'mouseenter',
		hideEvent: 'mouseleave',
		where: 'bottom-left'
	});
});
Example:
6. Positioning: Fixed positioning:
    a. Set the option autoPosition to false.
    b. Supply a fixed position value for the where option, in this case, left and right, will not auto adjust.

#JavaScript Sample
$(document).ready(function(){
	//initiate info bubble for info notices
	$('.example_6').infoBubble({
		showEvent: 'mouseenter',
		hideEvent: 'mouseleave',
		where: 'left',
		autoPosition: false
	});
});
Example: