jQuery Bubble Popup v.1.1

Tutorial #1: How to create a simple Bubble Popup!

The following code creates a simple Bubble Popup opening when mouse is over on the element with ID '#dummy1'.

		$('#dummy1').SetBubblePopup({
			innerHtml: '<p>You can set any HTML tag<br />inside this popup!<br /><a href="#">this is a link</a></p>'
		});
		

Tutorial #2: How to create Bubble Popups with custom styles!

We define a custom style and message for the Bubble Popup on '#dummy2' element...
Then, we define a common style both for elements with class '.myclass' and rel attribute 'nofollow';
Note: we call the "SetBubblePopup()" method from "jQuery" object to select more elements at time.

			$('#dummy2').SetBubblePopup({
				innerHtml: '<p>Bubble Popup!</p>', 
				bubbleAlign: 'left',
				tailAlign: 'left',
				color: 'green',
				contentStyle: 'font-size:16px;'
			});
			
			jQuery().SetBubblePopup({
				cssClass: [ ".myclass" ],
				relAttribute: [ "nofollow" ],
				
				innerHtml: '<p>another Bubble Popup!</p>', 
				bubbleAlign: 'right',
				tailAlign: 'right',
				color: 'violet',
				contentStyle: 'color:#CC0066; font-family:Arial; font-size:11px; font-weight:bold;'
			});
		

Tutorial #3: How to create Bubble Popups with custom events!

This code creates a Bubble Popup for each element and attach to it a default HTML message.
Besides, it disables "showOnMouseOver" event for all Bubble Popups,
because we will implement own custom events and messages for each element!

		jQuery().SetBubblePopup({ 
			tagID:['#dummy3', '#dummy4'], 
			innerHtml: '<p>This is the default message<br />for all Bubble Popups!</p>'
			showOnMouseOver: false
		});
		
		// Show Bubble Popup on mouse over'#dummy3' and hide it on mouse out;
		// Bubble Popup will display the default HTML message.
		$('#dummy3').mouseover(function(){
			$('#dummy3').ShowBubblePopup();
		});
		$('#dummy3').mouseout(function(){ 
			$('#dummy3').HideBubblePopup(); 
		});
		
		// Show Bubble Popup only on click '#dummy4' and hide it on mouse out;
		// however, Bubble Popup will display a custom HTML message.
		$('#dummy4').click(function(){
			$('#dummy4').ShowBubblePopup({ innerHtml: "This is a custom text!" });
			return false;
		});
		$('#dummy4').mouseout(function(){ 
			$('#dummy4').HideBubblePopup(); 
		});
		

Tutorial #4: Control Bubble Popups events externally.

Set a Bubble Popup with events controlled inside the HTML tag.

		$('#dummy5').SetBubblePopup({ 
			innerHtml: '<p>Bubble Popup!</p>',
			showOnMouseOver: false
		});
		

Tutorial #5: Options.

When we call the "SetBubblePopup()" method from an element, we can set the following options:

		STRING	 	innerHtml 			HTML message inside Bubble Popup.
		STRING	 	bubbleAlign 		accepts 'center', 'left' or 'right' values.
		STRING	 	tailAlign 			Bubble Popup's tail alignment, accepts 'center', 'left' or 'right' values.
		INT		 	distanceFromTarget Bubble Popup's distance from element.
		INT		 	openingVelocity 	fade in velocity.
		INT		 	closingDelay 		accepts an integer.
		BOOLEAN	 	showOnMouseOver		disable "onmouseover" event.
		STRING	 	color				change Bubble Popup color based on default template folder;
		accepts 'azure', 'blue', 'green', 'orange', 'violet', 'yellow'.
		STRING	 	imageFolder 		folder name that stores color templates.
		BOOLEAN	 	hideTail			true or false;
		ARRAY	 	hideObjectID		hide specific object tags if it is needed for incompatibility.
		STRING	 	contentStyle		set a custom CSS style to the HTML message.
		INT		 	zIndex				CSS z-index property of Bubble Popup.
		INT/STRING	width				Bubble Popup's width: 'auto' (as default), an integer value or a string like '200px'.
		
		$('#mydummy').SetBubblePopup({ 
		
			innerHtml: 'custom HTML message',
			bubbleAlign: 'center',
			tailAlign: 'center',
			distanceFromTarget: 25,
			openingVelocity: 250,
			closingDelay: 150,
			showOnMouseOver: true,
			color: 'green',
			imageFolder: 'bp_images',
			hideTail: false,
			hideObjectID: [ "#id1", "#id2" ],
			contentStyle: 'color:#CC0000; font-size:16px;',
			zIndex: 100,
			width: 'auto'
		
		});
		

When we call the "SetBubblePopup()" method from the "jQuery" object, we can set also the following options to select multiple elements at time.

		ARRAY	 tagID			select elements defined by an ID attribute.
		ARRAY	 cssClass		select elements defined by a CSS class.
		ARRAY	 relAttribute	select "A" tags with specific "rel" attributes.
		ARRAY	 htmlTag		select HTML tags.			
		
		jQuery().SetBubblePopup({
			
			tagID: [ "#id1", "#id2", "#id3" ],
			cssClass: [ ".myclass1", ".myclass2" ],
			relAttribute: [ "nofollow" ],
			htmlTag: [ "a", "img", "span", "div" ]
			
			
			innerHtml: 'custom HTML message',
			bubbleAlign: 'center',
			tailAlign: 'center',
			distanceFromTarget: 25,
			openingVelocity: 250,
			closingDelay: 150,
			showOnMouseOver: true,
			color: 'green',
			imageFolder: 'bp_images',
			hideTail: false,
			hideObjectID: [],
			contentStyle: '',
			zIndex: 100,
			width: 'auto'
		
		});