jQuery Bubble Popup Implementation

I needed to implement some tooltip functionality, so I resorted to looking for a jQuery snippet that I could use. I came across this nifty plugin called jQuery Bubble Popup. It was really simple to install and I was using it on my project within minutes.

Here’s a quick list of instructions that I followed when installing jQuery Bubble Popup:

Download the latest version of jQuery Bubble Popup and extract it.
Place jquery-bubble-popup-v3.css and jquery-bubble-popup-v3.min.js into your css and javascript folders, respectively.
Copy the jquerybubblepopup-themes folder into your images folder.

Paste the following JavaScript code into the <head> section of the page you’d like the tooltip functionality.

$(document).ready(function(){
	$("#tooltip_object").CreateBubblePopup({
		position : 'top',
		align : 'center',
		innerHtml: 'Tooltip text',
		innerHtmlStyle: {
		color:'#FFFFFF',
		'text-align':'center',},
		themeName: 'all-black',
		themePath: 'jquerybubblepopup-themes'
	});
});

Edit the code and define the object you want the tooltip to appear on, your tooltip text, and which theme you want to use for displaying the tooltip.
Voila! You’ve got a nifty little bubble popup appearing on your page.

Leave a Reply Cancel reply