May 01, 2012

JQuery spot popup tool-tip

Introduction: When I first started messing around with JQuery, the one thing that I keep comparing to was Flash. I wasn’t a Flash guru, but I had enough knowledge of it to do just about anything that I wanted to do. JQuery was felt a little bit alien to me, but then again, what doesn’t when you’re trying to learn a new language right?

Goal: What I want to do is put my cursor over a link, div, image or just about any element and have a tool tip show up.

What we need: JQuery Engine, JQuery UI, basic javascript knowledge.

1.Calling the Engine and the User Interface

You should put this in the <head> tag </head>

2. Styling

	.init-block {
		position: absolute;
		left: 0px;
		top: -999px;
		index: 10;
		border: 1px solid #ccc;
		background-color: #eee;
		font-family: Arial;
		font-size: 15px;
	}
	.init-block div{
		padding: 10px;
	}
	.spacer{
		margin-top: 200px;
		margin-left: 200px;
	}

3. JQuery Codes

$(function(){
	$(".init-block").animate({opacity: 0});
	$(".linker").hover(function(){
		$("."+$(this).attr("show")).stop().animate({
			/* We set the tool-tip TOP to be of the hovered element's TOP */
			top: $(this).offset().top - $("."+$(this).attr("show")).height() - 20,
			/* We want the tool-tip to be center along our hovered element */
			left: $(this).offset().left - ($("."+$(this).attr("show")).width() / 2) + ($(this).width()/2)
		},0);
		/* This animation will add 10 more pixels to the TOP of the tool-tip for a smooth transition */
		$("."+$(this).attr("show")).stop().animate({
			top: $("."+$(this).attr("show")).offset().top + 10,
			opacity:1
		});
	},
	/* This function runs when we hover out of the Element */
	function(){
		/* This moves the tool-tip back up 10 pixels and also setting it's opacity to 0 */
		$("."+$(this).attr("show")).stop().animate({
			top: $("."+$(this).attr("show")).offset().top - 10,
			opacity:0
		}, 200,function(){
			/* After the OPACITY has completely become 0(zero), we want to hide it away so it doesn't block any other elements */
			$("."+$(this).attr("show")).css({
				top: -999
			});
		});
	});
});

4. HTML Codes

<div class=”init-block link-1-div”>Just info<br/> What subway sandwich do you link?</div>
<a href=”javascript;” class=”linker” show=”link-1-div”>Show link</a>

5. How to use it

Each element that you wish to hover over to show the tool tip, you would add a class “linker” to it. This element will also need the attribute “show”. This attribute will show the tool-tip.

How to name a tool-tip: Set a div to have a class of “init-block”. You will also need to add another class to it that correspond to your LINKER’s SHOW attribute.

That’s it!