Hi guys! If you have tested the beta of Plusmusica (it’s a beta, report bugs please!) maybe you have find some tips when you move the mouse over some elements. We will learn how to create them in a very easy way.

We are going to learn how to create our custom jQuery plugin to show tips on mouse over event on our desired elements. We will also be able to customize the appearence of the tip division for each kind of elements in the CSS code and much more.

A real example is worth a thousand words:

As always, you can try the living example over here.

Tested in: Firefox, Internet Explorer 6 & 7, Opera, Safari & Chrome.
Let’s learn guys!

Quick note: I receive questions about web hosting. I would recommend checking out WHS as they have a wide selection of good hosting providers and articles about the internet. Check it out for more info. Hope this helps!

What are we going to do?

As we said in the introduction we are going to learn how to display and hide a tip box in our desired elements to show the user some information about them.

It’s a common practice in our days because it improves the user’s experience and we will learn how to create a jQuery plugin to apply achieve it by using:

• xHTML: To create the example.
  
• CSS: To customize our example.
• jQuery: javascript library. In this case we are going to use the new version 1.3!

So guys, let’s rumble!

Step 1: The Layout

One more time this is the less important part, so we will reuse some part of other tutorials to go faster to the interesting part:

[code language="html"]



	
	
	
	
	


	
	

		
Some examples using different parameters
		
Move the mouse over these divisions to know more about them:
		

			

				
Default values
			
			

				
Allowing HTML
			
			

				
All parameters!
			
			

				
Not fixed width!
			
			

				
BIG
			
			
		
		
Take a look to some of our projects
		
Move the mouse over these projects to know more about them:
		

			

				
Plusmusica
			
			

				
Cokidoo
			
			
		
	
	
	
	


[/code]

As you can see we are creating some divisions that will be used with the plugin to show different tips in each one.

We also are including these 3 javascript scripts:

• jquery.js It’s the new 1.3 version
• jquery.tipbox.js Our own future plugin
• example.js Here we are making use of our tipbox plugin

Let’s move to the CSS part to add some style to this layout!

Step 2: Adding CSS style

One more time the second step is about the CSS style. One more time we are making use of our custom CSS reset. We are applying some style to our elements.

[code language="css"]
@CHARSET "UTF-8";
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border: 0pt none;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0pt;
padding: 0pt;
vertical-align: baseline;
}
body{
	line-height: 14px;
	font-size: 12px;
	background: #fff;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	margin: 0pt;
	cursor: default;
}
table{
	border-collapse: separate;
	border-spacing: 0pt;
}
caption, th, td{
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after{
	content: "";
}
blockquote, q{
	quotes: "" "";
}
input, textarea, select{
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}
strong{
	font-weight: 700;
}
ul{
	list-style: outside;
}
a{
	cursor: pointer;
	color: #296ba5;
	text-decoration: none;
}
.clear{
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
}
/******* /GENERAL RESET *******/
h1{
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2em;
	border-bottom: 1px dotted #6b9ef1;
	color: #5f95ef;
	margin-bottom: 0.5em;
}
/******* LOGO *******/
#logo{
	text-align: center;
	margin-top: 1em;
	display: block;
}
/******* /LOGO  *******/
/******* CONTAINER *******/
#container{
	width: 960px;
	margin: 40px auto;
	text-align: left;
}
#container p{
	margin: 0 0 12px 12px;
}
/******* /CONTAINER *******/
/******* CONTENT *******/
div.content span{
	display: block;
	font-weight: 700;
	color: #898989;
	margin-top: 10px;
}
div.content{
	padding: 0;
	margin-bottom: 20px;
}
/******* /CONTENT *******/
/******* SECTIONS *******/
.content div{
	float: left;
	width: 180px;
	margin-right: 4px;
}
.content div h2{
	font-size: 12px;
	font-weight: 700;
	display: block;
	text-align: center;
	margin-bottom: 9px;
}
/******* /SECTIONS *******/
/******* TIPBOX *******/
#tipBox{
	background: #f7fafb;
	border: 1px solid #ace4ff;
	font-size: 10px;
	padding: 3px;
	width: 180px;
}
#tipBox.blue{
	color: #44a9da;
}
#tipBox.width{
	width: auto;
}
#tipBox.big{
	width: auto;
	font-size: 40px;
	line-height: 1em;
	padding: 1em;
}
/******* /TIPBOX *******/
[/code]

As you have seen at the end of the CSS code, we have some different classes for the #tipBox, it’s because our pluginwill be able to apply different styles to the #tipBox division for each desired element!

Now let’s dive into the plugin.

Step 3: Creating our tipBox plugin!

Finally! We have arrived to the cool part! We are going to learn how to create the plugin

We will remember what our tipBox plugin will do to our desired elements:

• Display / Hide a tip box
• We will be able to set the content of the tip box in each element
• We will be able to enable / disable the html code of the content in each element
• We will be able to apply a specific class to the #tipBox division in each element

Not bad eh? So let’s take a look at the entire code of our jquery.tipbox.js plugin:

[code language="javascript"]
jQuery.fn.tipbox = function(content, allowHtml, className){
	jQuery.fn.tipbox.created.id = "tipBox";
	$("body").append(jQuery.fn.tipbox.created);
	//set some properties for the tipBox division
	var tipBox = $(jQuery.fn.tipbox.created);
	tipBox.css({"position":"absolute","display":"none"});

	//functions
	function tipBoxShow(e){
		tipBox.css({"display":"block", "top":e.pageY+16, "left":e.pageX});
	}
	function tipBoxHide(){
		tipBox.css({"display":"none"});
	}

	//events for each element
	this.each(function(){
		$(this).mousemove(function(e){
			tipBoxShow(e);
			//update the content
			if(allowHtml)
				tipBox.html(content);
			else
				tipBox.text(content);
			//remove all classes for the tipBox before add a new one and to avoid the "append class"
			tipBox.removeClass();
			//set class if specified
			if(className) tipBox.addClass(className);
		});
		$(this).mouseout(function(){
			tipBoxHide();
		});
	});
};

//create the element (avoiding create multiple divisions for the tipBox)
jQuery.fn.tipbox.created = document.createElement("div");
[/code]

As you can see it isn’t difficult to create our own plugin… but take a look at the last line. We are defining a new property called jQuery.fn.tipbox.created wich contains a new created div.

jQuery.fn.tipbox.created div will be our #tipBox division and if you take a look at the begining of the plugin function we are setting there the #tipBox id.

Why are we setting up the id property on this division? Just because we need a reference at the code to customize it. As you can see this division will be absolute positioned, because we will need to define the top and left CSS properties in the future.

We also have defined 3 parameters for our plugin function:

• content: Will be the displayed content of our #tipBox
• allowHtml: Enable or disable the HTML in the content
• className: Apply a new CSS class to our #tipBox if wanted

This parameters will have an important role in the development of our plugin. They will appear at our 2 functions:

• tipBoxShow(e): Show, update the content and the absolute position of the #tipBox divison.
• tipBoxHide(): Hide the #tipBox division.

So now that we got our 2 functions defined we only need to apply them in the desired events. These desired elements are defined in the example.js javascript file. We are already using the plugin in this file!

We will call the tipBoxShow(e) function when the user moves the mouse over our desired elements, specified in the example.js javascript file. If the user moves out the mouse, the #tipBox division will be hidden.

And that’s all guys! Just comment that as you can see, we are managing the different values of the parameter’s plugin function if they are defined in at example.js:

[code language="javascript"]
$().ready(function(){
	$("h1").tipbox("This is a 
 element", 0);
	$("div.default").tipbox("Only content is specified. So doesn't allow HTML and custom style.");
	$("div.strong").tipbox("Content and htmlAllow are specified. So we got HTML content but not custom style.", 1);
	$("div.all").tipbox("Content allow HTML and custom CSS class!", 1, "blue");
	$("div.width").tipbox("As you can see, we can fix our custom width too by setting the class!", 0, "width");
	$("div.big").tipbox("Yeah, really", 0, "big");
	$("div.project").tipbox(" 
 Plusmusica.com", 1, "width");
	$("div.cokidoo").tipbox(" 
 Cokidoo.com - Creating Communities", 1, "width");
});
[/code]

Let’s try our example

Step 4: Trying our tipBox plugin!

And that all guys! Now we have a simple and useful jQuery plugin to show some tips in our webpages! I hope you can use it to improve your projects as always

Remember that because we can enable the HTML in our content, we can show images too! Not only text! Take a look at the projects section of our demo!

You can try the tutorial online here to see how It is working and download here all sources.

Remember that you can solve your doubts in our forums and follow us on Twitter to know more about what are we doing in any moment!

See you on next tutorial and remember that we want you suggest tutorials to write!

One more thing…

Latest 646-204 dumps including 70-646 quiz for personal assessment guarantee you the real success in exam with no effort. There are many sources available for N10-004 preparation but if you want guaranteed success then subscribe for only certkiller.

The scripts here are compatible with any web hosts.