Currently Browsing: Home » Beautiful JavaScript Tooltips

Beautiful JavaScript Tooltips

When it comes to JavaScript tooltips, there is always competition. Many people are in constant search for the best design. Whether it’s animation, delay, styling, or load time, disadvantages of certain models run rampant.

To satisfy these needs, this tutorial will take you through the creation of beautiful JavaScript tooltips through the use of the Yahoo! User Interface Library and jQuery.

View a Demo Download the Files

The first task is to include external files in our HTML document:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container-min.js"></script>

The YUI Tooltip extension provides great styling and nice animation. It will accomplish the main job in our JavaScript code.

Now that the dependencies are taken care of, you can setup some basic HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>YUI Tooltips</title>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/container/assets/skins/sam/container.css">
</head> 

<body class="yui-skin-sam"> 

<ul id="nav">
	<li><a href="#" title="Lorum ipsum dolor sit amet">Lorem</a></li>
	<li><a href="#" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>
	<li><a href="#" title="Morbi in sem quis dui placerat ornare">Morbi</a></li>
	<li><a href="#" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li>
	<li><a href="#" title="Pellentesque fermentum dolor">Pellentesque</a></li>
</ul>

</body>
</html> 

Tooltips will be applied to the links inside the #nav unordered list.

Before you start the JavaScript, it’s a good idea to add in a little styling:

<style type="text/css">
body {
	font: 14px/24px 'Trebuchet MS', Helvetica, Sans-Serif;
	margin: 0;
	padding: 0;
}

#nav {
	list-style-type: none;
}

#nav li {
	margin-bottom: 5px;
}
</style>

A few minor changes to the menu display and text are added here.

At this point, you can start the JavaScript code. In order to implement YUI tooltips, you must provide the id of the link element. Adding in separate ids to each and every link element can be a hassle. Luckily, jQuery makes this easy:

for ( var i = 0; i < $('a').length; i++ ) {
	$('a:eq(' + i + ')').attr( 'id', 'link-' + i );
}

Now each link element will have a unique id: #link-1, #link-2, #link-3 and so on.

All that’s remaining is the creation of Tooltip objects to apply the effects:

new YAHOO.widget.Tooltip("myTip", {
	context: 'link-' + i,
	effect: { effect:YAHOO.widget.ContainerEffect.FADE, duration:0.30 },
	showdelay: 0
} );

Placing this snippet in the previous loop will ensure each link element has it’s own tooltip. The text inside will be defined by the title attribute.

And there you have it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>YUI Tooltips</title>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/container/assets/skins/sam/container.css">

<style type="text/css">
body {
	font: 14px/24px 'Trebuchet MS', Helvetica, Sans-Serif;
	margin: 0;
	padding: 0;
}

#nav {
	list-style-type: none;
}

#nav li {
	margin-bottom: 5px;
}
</style>

</head> 

<body class="yui-skin-sam"> 

<ul id="nav">
	<li><a href="#" title="Lorum ipsum dolor sit amet">Lorem</a></li>
	<li><a href="#" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>
	<li><a href="#" title="Morbi in sem quis dui placerat ornare">Morbi</a></li>
	<li><a href="#" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li>
	<li><a href="#" title="Pellentesque fermentum dolor">Pellentesque</a></li>
</ul>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container-min.js"></script>

<script type="text/javascript">
	$(function() {

		for ( var i = 0; i < $('a').length; i++ ) {
			$('a:eq(' + i + ')').attr( 'id', 'link-' + i );

			new YAHOO.widget.Tooltip("myTip", {
				context: 'link-' + i,
				effect: { effect:YAHOO.widget.ContainerEffect.FADE, duration:0.30 },
				showdelay: 0
			} );
		}

	});
</script>

</body>
</html>

Have a happy square root day (03/03/09)!

This entry was posted on Wednesday, March 4th, 2009 at 08:13:20. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “Beautiful JavaScript Tooltips”

  1. Niall Flynn says:

    Works great one question when I try to copy that css to my webserver and modify the colours it stops working, any ideas?

  2. Good site, where did you come up with the knowledge in this piece? Im glad I found it though, ill be checking back soon to see what other articles you have.

  1. Gözde Berberoğlu » Günün Derlemeleri / 9 Temmuz 2009

Leave a Reply

Want to be notified when someone replies? Subscribe to this post's comment RSS feed.
Any field marked with a * is required.