Create simple tooltips with CSS and jQuery - Part 2: Smart Tooltips

Create simple tooltips with CSS and jQuery – Part 2: Smart Tooltips

In a recent tutorial I taught you how to create simple transparent tooltips with a few lines of CSS and jQuery. Today we will build some more advanced tooltips, based on the aforementioned tutorial.

These tooltips will act a little bit smarter than our basic version. The script will skip links with empty or missing title tags, but more important: the tooltips will try to stay in the browser viewport.

So before we start here is a working example.

Lets have a look at last weeks results:

function simple_tooltip(target_items, name){
 $(target_items).each(function(i){
		$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
		var my_tooltip = $("#"+name+i);

		$(this).removeAttr("title").mouseover(function(){
				my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400);
		}).mousemove(function(kmouse){
				my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
		}).mouseout(function(){
				my_tooltip.fadeOut(400);
		});
	});
}

$(document).ready(function(){
	 simple_tooltip("a","tooltip");
});

We will leave the $document.ready function untouched and make modifications just to the simple_tooltip function. The first improvement is an if statement which checks if the title attribute is set correctly:

function simple_tooltip(target_items, name){
 $(target_items).each(function(i){
		$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
		var my_tooltip = $("#"+name+i);

                if($(this).attr("title") != "" && $(this).attr("title") != "undefined" ){

		$(this).removeAttr("title").mouseover(function(){
				my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400);
		}).mousemove(function(kmouse){
				my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
		}).mouseout(function(){
				my_tooltip.fadeOut(400);
		});

                }
	});
}

Rather simple, now for the tricky part :)
All upcoming code impovements will take place during the mousemove event so I will only display this part for now:

.mousemove(function(kmouse){
	my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
})

Until now the tooltip was always aligned next to the mouse cursor with an offset of 15px. To check if the tooltip would cross the viewports borders we first need to know where the viewports borders are.
Since we align the tooltip at the top right of our mouse we need to know the top edge and the right edge of the browser. Thanks to jQuery this is mere child's play:

.mousemove(function(kmouse){

    var border_top = $(window).scrollTop();
    var border_right = $(window).width();

    my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
})

The top of the viewport is 0 if you didnt scroll down; if you did scroll down it is 0 + the amount of pixels you scrolled. This value is returned by scrollTop().

To get the right border we just have to ask for the current windows width.

Since we need a little more flexibility we will create variables for the left and top position of our tooltip, as well as a variable for the offset.

.mousemove(function(kmouse){

    var border_top = $(window).scrollTop();
    var border_right = $(window).width();
    var left_pos;
    var top_pos;
    var offset = 15;

    my_tooltip.css({left:left_pos, top:top_pos});
})

Next thing we do is the math to calculate where to position the tooltips:

if(border_right - (offset *2) >= my_tooltip.width() + kmouse.pageX){
	left_pos = kmouse.pageX+offset;
} else{
	left_pos = border_right-my_tooltip.width()-offset;
}

This if statement basically checks if the width of the tooltip plus the x-position of your mouse is smaller than the vieport. If thats the case the tooltip wouldn't overlap the vieports border and therefore can be aligned next to the mouse.

If thats not the case the tooltip will stay at a fixed x-position.

if(border_top + (offset *2)>= kmouse.pageY - my_tooltip.height()){
	top_pos = border_top +offset;
} else{
	top_pos = kmouse.pageY-my_tooltip.height()-offset;
}

This if statement is the same for the top border. The combined script looks like this:

function simple_tooltip(target_items, name){
 $(target_items).each(function(i){
		$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
		var my_tooltip = $("#"+name+i);

		if($(this).attr("title") != "" && $(this).attr("title") != "undefined" ){

		$(this).removeAttr("title").mouseover(function(){
					my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400);
		}).mousemove(function(kmouse){
				var border_top = $(window).scrollTop();
				var border_right = $(window).width();
				var left_pos;
				var top_pos;
				var offset = 15;
				if(border_right - (offset *2) >= my_tooltip.width() + kmouse.pageX){
					left_pos = kmouse.pageX+offset;
					} else{
					left_pos = border_right-my_tooltip.width()-offset;
					}

				if(border_top + (offset *2)>= kmouse.pageY - my_tooltip.height()){
					top_pos = border_top +offset;
					} else{
					top_pos = kmouse.pageY-my_tooltip.height()-offset;
					}	

				my_tooltip.css({left:left_pos, top:top_pos});
		}).mouseout(function(){
				my_tooltip.css({left:"-9999px"});
		});

		}

	});
}

$(document).ready(function(){
	 simple_tooltip("a","tooltip");
});

Our script grew a little bigger during this tutorial, but is nevertheless, very lightweight with only 43 lines of code and already can do more than some of the jQuery tooltip plugins out there ;)

Add to Digg Add to del.icio.us Add to StumbleUpon Add to technorati

Responses to “Create simple tooltips with CSS and jQuery – Part 2: Smart Tooltips”

Mitch November 4th, 2008 at 9:45 pm
Thanks a lot bro! Saves my day!
d34th November 6th, 2008 at 4:16 pm
Very nice – I will use it!
Atom Groom November 11th, 2008 at 5:09 pm
Hi,

I would love to use your tool tip, but I cannot figure out how to customize it. I'd like the tool tip to always be centered and above the link.

I've messed with the javascript and the positioning but cannot get it correct.

Any thoughts? Thank you in advance!
Atom Groom
Atom Groom November 11th, 2008 at 5:12 pm
*An easy explanation if for the tooltip to be centered and on top of the mouse cursor :)

Thanks!
Atom Groom
Mark November 19th, 2008 at 10:45 pm
Great work on this. I'm looking to use this on list items – which works for the most part – unfortunately it seems to lose track of the mouse position when hovering over input elements inside the list. Any suggestions to fix this?

Atom Groom: I havn't tested this but I believe this will solve your problem, in the line:

left_pos = kmouse.pageX+offset;

Changing offset to half of the tooltip's width should center it on the mouse.
Mark W November 20th, 2008 at 3:54 pm
This is a great (tool) tip!!

What would you do if you wanted this to work in conjunction with a Lightbox style image gallery? Generally, the Lightbox takes it's details for a title from the "title" attribute. This is disabled in the tooltips script so no title is passed when the Lightbox image pops up therefore no image title!
Kriesi November 24th, 2008 at 11:21 am
you could remove the title just while hovering over the image and as soon as you klick the image or leave with the mouse add the title attribute again
Tom R December 9th, 2008 at 4:29 pm
Great Website and Great piece of code … I am just learning Javascript and using your code to support applications in Oracle Apex. I have the tooltips working fine on pages that are submitted and refreshed. Now I am trying to do Ajax calls and only rewriting part of the screen which contain gif where I use the tooltips. I thought I could just call the simple_tooltip function after I perform the dom element inner html replace to update the tooltips but this doesn't seem to work. Any ideas on what I would have to do to update the tool tips in the Javascript code ? Any help appreciated.

Thanks,
Tom
a3cube December 18th, 2008 at 10:14 am
Nice one but shouldn't the $("body").append come after if($(this).attr("title") != ""….? I hope get what am saying.
Like this:

if($(this).attr("title") != "" && $(this).attr("title") != "undefined" ){
$("body").append(""+$(this).attr('title')+"");
jm December 23rd, 2008 at 1:49 am
this is great, just what i needed, EXCEPT i was wondering if there's a way to include images within the tooltip, can anyone get me started on a tweak to allow that?
jm December 23rd, 2008 at 1:58 am
also i'm wondering if there's a way to include html in the title too
darwin January 3rd, 2009 at 2:05 pm
thanks for your tutorial :)
David W January 29th, 2009 at 9:20 am
Awesome tooltips! :) One thing though, i'd love to be able to impliment a delay on the appearance of the tooltip, but my setTimeout() function seems to be ignored. Oh dear. Any ideas?
David W January 29th, 2009 at 10:23 am
Nevermind, it's terrible in theory but I just messed about with the code and ugly-hacked this solution:

my_tooltip.css({opacity:0.85, display:"none"}).fadeIn(3000);
my_tooltip.css({opacity:0.85, display:"none"}).fadeIn(300);

but please, if there is a better way I'd love to know! :)
Rich February 3rd, 2009 at 1:17 pm
Amazing thank you, could also do with knowing how to insert HTML into the title so I can format the text in the tooltip?
Mark February 6th, 2009 at 1:17 pm
simple and nice!!! thanks!! :) have looked for a tooltip like this for long time… But is there a way to include images in the title???
hamid February 23rd, 2009 at 11:07 pm
it looks great, but how can i use img attribute instead title? i have tried it but it doesn't work!
Harel Seigmann March 20th, 2009 at 1:52 pm
Nice tooltip. Managed to figure out a way to get around the refreshing problem when you are changing the title through an ajax call. What I have done is to append a random number to the id of the div so that when section is refreshed, there will always be a new id.

if($(this).attr("class") == "tooltipj")
{

var d = new Date();
var randomnumber = d.getTime()
$("body").append(""+$(this).attr('title')+"");
var my_tooltip = $("#"+name+i+randomnumber);
Harel Seigmann March 20th, 2009 at 1:58 pm
Forgot to add – after your ajax call (updatepanel or whatever), add:
simple_tooltip("a","tooltip");
Tom R March 27th, 2009 at 3:55 pm
Great script … I am using your tooltip for images which I am displaying in a jQuery Accordian resizable DIV. The amount of tooltips on the page is about 40-50 (dynamic). I am running into the problem of having a scrollable div when using a appearing at the bottom of the div. If I have alot of tooltips the browser creates a vertical scrollbar on the right and the page jump down to show the selected entry. It appears the browser thinks the size of the DOM includes the tooltip entries. Which it does. I tried putting a separate table before the bottom of the body tag but that did not seem to help. Any suggestions when I am working with so many tooltip beside dynamically creating each one at mouseover time ????

Thanks,

Tom
Tom R March 27th, 2009 at 6:37 pm
Please ignore that last post. I forgot to put display none in my style …..

Sorry
Sul April 8th, 2009 at 10:11 pm
Thanks for sharing, I have a quick question though? is it possible to make the tool tip clickable. I mean when mouse over the link make the tool tip stay for a period of time to make it clickable.

thanks for your help
bitlimakina May 16th, 2009 at 2:29 pm
great post. exam:
bitlimakina May 16th, 2009 at 2:30 pm
sorry exam: link
fred May 24th, 2009 at 5:56 pm
cool stuff.
Jordan Garn May 28th, 2009 at 2:58 am
Awesome tutorial adds to your previously good one, if your looking for ideas for a new tutorial a good one would be to show the CSS you did for the rounded corners, I've done rounded corner before but not stretchable ones.
boss June 3rd, 2009 at 1:25 pm
Hello, nice effect on mouse over the code box, can i ask how you did that?
thanks
Morrelinko August 1st, 2009 at 11:42 am
Love it. I guess i'll stick to this
Garett September 15th, 2009 at 1:38 am
Where are the css files for this tutorial? Do you have a downloadable demo with all of the files in a package? That would be very helpful for us not so advanced coders.
Pavel September 18th, 2009 at 1:40 pm
Great job! Thank you!

PS. I think that hard-coded width of a tooltip is not very good. But as we know, IE6 doesn't understand max-width css property. This can easily be solved with javascript. Just add this line to the simple_tooltip() function:

if(my_tooltip.width() > 450) my_tooltip.css{width:"450px"});
Pavel September 18th, 2009 at 1:41 pm
Correct line should be:
if(my_tooltip.width() > 450) my_tooltip.css({width:"450px"})
I made a small mistake in the previous comment
Pavel September 18th, 2009 at 1:51 pm
And don't forget to remove with and max-width properties from .tooltip selector, if you have any.
bookvalue September 30th, 2009 at 5:37 pm
very nice, thank you
Brad October 26th, 2009 at 7:52 am
Great job! Thank you for sharing!!!
Sander March 3rd, 2010 at 2:05 pm
The tooltip isn't coming up. Can anyone tell me why? I had included:

jquery version 3.6.2

tooltip.js

the .css

And the link was the same as in the example page.
Sander March 3rd, 2010 at 2:31 pm
Can anyone upload the whole pack that I can download?

Thanx.
Destiny Lenczyk March 5th, 2010 at 3:52 pm
[..] A little unrelated, but I quite simply liked this site post [..]