How To Set Up Tipsy & Do Some Cool Effects With It - HTML/JavaScript Tutorials

Hello guys! In this tutorial (my first Javascript one) I want to show you an interesting technology, how I've implemented it, and how you can implement it. First off, this isn't an HTML tutorial, I assume you that know some HTML and are capable of handling basic Javascript and jQuery. This jQuery plugin is called Tipsy. Tipsy produces these nice effects when you hover over a hyperlink, image, or a div. Also, check out the tipsy documentation and download it. Alright, here is the skeleton of our HTML document:

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
	</head>
	
	<body>
	
	</body>
</html>

Alright guys, that's the basic skeleton of our HTML document, we'll be adding more to it. Now, there's some code that you must have in your head element. First you guys will need to see my directory structure to understand how I'm going to link documents:

--css
main.css
--images
tipsy.gif
--js
jquery.tipsy.js
index.html

Alright, I hope you guys understand that. Let's link our style sheet, shall we:

<link rel="stylesheet" type="text/css" href="css/main.css" />

We'll get to the contents of main.css later. Next, since tipsy uses the jQuery framework, we must link to that also. I'm going to use the CDN hosted version from Google. You may download it from jquery.com though. Here it is in the head element:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Now, unzip the tipsy archive. You also need to go into tipsy-0.1.7->src->javascripts and copy jquery.tipsy to your js directory. After that, we link to it in the head element:

<script type="text/javascript" src="js/jquery.tipsy.js"></script>

Now, we're done with the head element, unless you want to add more. We can also get main.css done right now. I suggest you use a CSS reset for everything you do on the web, but for the simplicity of this tutorial, I'm just going to use the CSS provided by tipsy. You will need to copy everything from tipsy-0.1.7->src->stylesheets->tipsy.css to main.css. That's all the CSS you need to get tipsy to look correct.

Let's also copy the image from tipsy-0.1.7->src->images to our image directory.

Now we have all the files that we need. All we need to do is create the links that we want tipsy to be on and the JS to get those link to function with tipsy. Alright guys. Create a link in your body element like so:

<a href="blah.html" id="test" title="blah">We're using Tipsy!</a>

The important parts of that href is the id and title, they're needed to make tipsy know where to put it's effect and what it should say in it. Alright, now we're going to add some Javascript to the body element as well to make it find the link. Do note that this should be above the link, I put it right after the opening body tag:

<script type="text/javascript">
$(function() {
	$('#test').tipsy();
});
</script>

That's it guys. It should be working! Examples of sites that use tipsy are Twitter, Forrst, and even my site. Okay guys, let's play with a few Tipsy effects, shall we?

Our first effect will be making it fade in and out. It's going to be rather easy to do. What I did was create a link with the id of fade (<a href="blah.html" id="fade" title="blah">We Fade!</a>), and with some jQuery, we make it work. Now most of the jQuery is the same as the normal tipsy, but now you have to add a parameter. It looks like: $('#fade').tipsy({fade: true});. We're basically setting a fade parameter to true so that a link fades in and out. Try it out!

Now we're going to change what tipsy calls the gravity of the hover effects. I just call it the direction. Now this parameter can take many different values, I'll show you guys a few. I suggest looking at the docs to see them all. Alright, as I said we're going to change the gravity. By default it's north, since it pushes away from the north. What we're going to do is make it go south, east, and west. Now you're going to want to create several links and I'll use the directions as the id. Are you guys ready for my jQuery?!?! lol. Okay guys, here it is:

$('#south').tipsy({gravity: 's'});
$('#east').tipsy({gravity: 'e'});
$('#west').tipsy({gravity: 'w'});

Sweet, guys we've now done 2 effects. You can now wipe the sweat off your neck. Actually, no you can't XP, we're not done. There is still one more thing I want to show you guys. You guys don't know how to combine my above two effect examples yet, do you? I'm going to show you guys

. Alright, I suggest creating a link mine is <a href="blah.html" id="south-fade" title="blah">We Go South & Fade!</a>. Okay guys are you ready for the jQuery? Lol I'm just kidding, I know you guys are for sure XP. Here is the jQuery: $('#south-fade').tipsy({gravity: 's', fade: true});. The purpose of me showing you guys this example was to really show you how to combine two effects and see them work together.

I'm also providing all the files as a zip file for those who want to see exactly how I did things incase they get confused.