Categories

Close

Design Lunatic

Awesome jQuery Tooltips

Nov 04, 2012 | In jQuery, Tutorials | By: Design Lunatic

Tooltips are a great way to display some information about an element on the page. Normally, these are used on links. In this post, I’ll explain how to create a jQuery script that allows for easy tooltips on a page.

View The Demo
Download Files

HTML

All that’s on the page is just some Lorem Ipsum text and a couple of links.

<section id="container">

<p>
Lorem ipsum dolor sit amet, video cum autem quod non dum, audite deo adoptavit cum magna amici invocat manibusque removit benedictus. Ad per dicis Deducitur potest contremiscunt <a href="#" data-tooltip="A tooltip!">pater unica</a> suae ad nomine sed haec aliquam laetandum prudentia litteris erutis invenies eum. Euro in fuerat se est amet consensit cellula rei finibus veteres hoc contra piissimi sibi adsedit in deinde cepit roseo. <a href="#" data-tooltip="This is a tooltip">Vini in deinde</a> cepit roseo ruens sed dominum sit audivit illius actio viro prudentius ei. Erras nisi auri est in lucem, venis potest in modo compungi mulierem.
</p>

</section>

The important part is the “data-tooltip” attributes on the links. These are so the jQuery script we’ll write knows what to display in the tooltip.

CSS

First off, get a good CSS reset, as these are invaluable in getting rid of weird browser-related issues. Now, let’s just style the main container to make it look nice.

body {
background: #eee;
}

#container {
font-family: arial;
font-size: 15px;
line-height: 25px;
color: #515151;
width: 600px;
height: 2000px;
padding: 20px;
border-left: 1px solid #dedede;
border-right: 1px solid #dedede;
border-bottom: 1px solid #dedede;
background: #fff;
margin: 0 auto;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}

The text inside the container will be 15px Arial with a line-height of 25px, and will be a dark grey color. The container will be 600px wide with some padding, and will have borders that are slightly rounded.

Next up, some link styling.

#container a {
color: #888;
text-decoration: none;
border-bottom: 1px dotted #888;
position:relative;
}

This is just for visual purposes, but notice the “position: relative”. This will be important in positioning the tooltip properly.

Now, we can style the tooltip. This will just be a simple rectanble, but it will have a triable facing downwards to indicate where the tooltip is coming from.

.tooltip {
width: 100px;
margin-left: -60px;
left: 50%;
line-height: 20px;
padding: 10px;
font-family: Arial;
font-size: 14px;
color: #777;
text-align: center;
border: 2px solid #bbb;
background: #fff;
text-indent: 0px;
position: absolute;
pointer-events: none;
opacity: 0;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
-webkit-border-radius: 5px;
border-radius: 5px;
}

All of this is just for visual purposes. We’re giving it a width of 100px, some padding, styling the text inside – basically, we’re just making it pretty. Notice the “left: 50%” and “margin-left: -60px”. This positions the left edge of the tooltip to be halfway in the link, but that’s not what we want; we want it to be perfectly centered. The “margin-left: -60px” makes it perfectly centered by shifting it a value to the left equal to half of the width of the tooltip (since with the padding, the tooltip actually has a total width of 120px). Another important property is the “pointer-events: none” property – this makes the user unable to interact with the tooltip, so that it doesn’t get in the way when it isn’t visible.

With this code, the tooltip already looks pretty – but it doesn’t have a triangle pointing down to indicate where it originated from. Let’s fix that.

.tooltip::after {
content: '';
position: absolute;
left: 50%;
margin-left: -10px;
bottom: -10px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 8px solid #bbb;
}

Instead of creating a separate element just for the triangle, we’re using the CSS3 “after” pseudo element. The “content” property is so that the pseudo element actually contains something; without this, nothing will show up. Now, the next two lines are centering the triangle. The “left: 50%” will make the left edge of the triangle be halfway, but by giving it a negative margin equal to half of its width, the triangle is now perfectly centered. However, the triangle is not where we want it to be. The “bottom: -10px” makes it be right below the tooltip. The next lines are what make it a triangle. By giving it a width and height of 0, all that’s left is the borders. Each border behaves like a triangle, where four triangles create a square. By making the left and right borders transparent, the top border is all that remains. The top border has the same color as the border of the tooltip, so it fits in nicely.

Jquery

Before we begin writing code, here’s how everything will work:

  1. The script iterates over each link, or “a” element on the page.
  2. For each link, a “div” with a class of “tooltip” is added.
  3. Each tooltip div contains the text from the “data-tooltip” attribute inside its corresponding link.
  4. When a link is hovered over, its corresponding tooltip is animated slightly upwards and the opacity is increased.

Let’s get to work:

$(document).ready(function(){
	
	$('a[data-tooltip]').each(function(){
		
	});

});

This is just the typical jquery document ready function, which waits until the page is loaded to execute the code inside it. The “each” function repeats itself for each element selected; in this case, the code inside it is executed for each link with a “data-tooltip” attribute on the page.

Now, we’ll create the tooltip.

$('a[data-tooltip]').each(function(){
	var tooltipText = $(this).attr('data-tooltip');
	$(this).append('<div class="tooltip">'+tooltipText+'</div>');
});

The variable “tooltipText” is simply the value of the “data-tooltip” attribute of the link. The next line of code appends a div with a class of “tooltip” and with the value of “tooltipText” inside it.

Next, we’ll position the tooltip properly.

$('a[data-tooltip]').each(function(){
	var tooltipText = $(this).attr('data-tooltip');
	$(this).append('<div class="tooltip">'+tooltipText+'</div>');
	
	var tooltipHeight = $(this).find('.tooltip').outerHeight();	

	$(this).find('.tooltip').css({
		top: -tooltipHeight,
	});
});

The variable “tooltipHeight” is the height of the tooltip using the “outerHeight” function, which is just the “height” function but it includes padding and borders – this allows for a more accurate height. “$(this).find” finds a particular element inside the current element. In this case, we’re just finding the tooltip that is inside the link the script is currently on. We then give the tooltip a “top” equal to the negative of its height, which puts it right above the link.

The last thing that must be done is making the tooltip actually appear when a link is hovered over.

$('a[data-tooltip]').each(function(){
//Your code here...
});

$('a[data-tooltip]').hover(function(){
		
	$(this).find('.tooltip').animate({
		opacity: 1,
		marginTop: -7
	},200);
		
});

When a link with a “data-tooltip” attribute is hovered over, the tooltip inside it is animated to “opacity: 1″, and is shifted up 7 pixels. When the tooltip shifts up like that, it not only looks nice, but also shows where the tooltip is actually coming from. These two animations are done during 200 milliseconds. At this point, we’re almost done, but notice what happens when you move the mouse cursor away from a link – nothing. The tooltip stays where it is.

Fortunately, this can easily be fixed.

$('a[data-tooltip]').hover(function(){
	
	$(this).find('.tooltip').animate({
		opacity: 1,
		marginTop: -7
	},200);
	
}, function(){
	$(this).find('.tooltip').animate({
		opacity: 0,
		marginTop: 0
	},200);
});

Here, we’ve used a callback to the “hover” function; the code inside the “hover” callback executes when the cursor is no longer hovering over the link. In this callback, we simply move the tooltip back down and reduce its opacity.

Here’s all the jQuery in one place.

$(document).ready(function(){
	
	$('a[data-tooltip]').each(function(){
	
		var tooltipText = $(this).attr('data-tooltip');
		$(this).append('<div class="tooltip">'+tooltipText+'</div>');
		
		var linkWidth = $(this).width();
		var tooltipWidth = $(this).find('.tooltip').outerWidth();
		
		var tooltipHeight = $(this).find('.tooltip').outerHeight();	

		
		$(this).find('.tooltip').css({
			top: -tooltipHeight,
		});
		
		
	});
	
	$('a[data-tooltip]').hover(function(){
		
		$(this).find('.tooltip').animate({
			opacity: 1,
			marginTop: -7
		},200);
		
	}, function(){
		$(this).find('.tooltip').animate({
			opacity: 0,
			marginTop: 0
		},200);
	});
	
});

That’s the end of this tutorial. I hope you found it useful and enjoyable, and if you have any questions or comments, feel free to comment below – I’d be happy to answer.