Total Followers 132,503
Tooltips on website are small things which can play a big role in website design. If a tooltip on your website is very well made and looks amazing then it can lift up visitors impression about your website. And that’s why here comes jQuery to help with its well made tooltips. And remember that all those small website design things make your website look better.
So this time I will show you my Top 30 of jQuery tooltip plugins. Enjoy!
This article has been updated on May 29, 2012
The Tooltip is a good looking tooltip that appears when you mouseover a tooltip handle. It’s not jQuery plugin, but CSS3 code, but it has cool animation and is very handy, view preview video on site to see how powerful it is!
Benefits:
Very cool tooltip! It’s very well made because it consists of cool transition effects and it also has a transparency and a drop shadow effect.
Brilliant tooltip! It looks so simple but it has awesome transition effects. This tooltip could be very useful for clean and simple websites.
Beautifully made tooltip! This tooltip never disappears but follows when you hover over other links. Such a simple looking tooltip but its animation is brilliant.
Very nice tooltip with cool transition effect and it also has a drop shadow.
Precisely designed and coded Fresh Tooltips. Great for any kind of website, very practical. The top one is 100% transparent black, which looks very very cool. Also perfect for learning—I’ve made lots of cross-browser research before I’ve done these, you won’t find better tutorial with such an amazing design than personally going through my code.
Cool tooltip with nice transition effect and cool transparent border around it.
Beautifully made tooltip with fade in / out transition effects, transparency and drop shadow effect.
Beautifully made tooltip with nice transition for input fields.
Simple but well made tooltip with a fade in transition effect. It has a cool looking border around it and when this tooltip appears, it also follows your mouse.
Cool tooltip which appears when you click on the link and then it sticks on the right-top corner of your window, and disappears after some time or when you close it manually by clicking on the close button. It also has fade in / out transition effects.
I know the main focus of this collection is for Tooltips but I just can’t let this gem pass without you knowing about it. It has tooltips too, and most of all you have the freedom to customize it at your own liking!
Interesting tooltip which can handle image and text together like a mini page. It has a drop shadow effect.
Cool digg-style post sharing tool. This tooltip could be very useful for social networking website.
Interesting tooltip with rounded corners for input fields. Tooltip fades in when you click on the input field and fades out when you click somewhere else.
Beautifully made tooltip with fade transitions. When you hover over a link, a tooltip fades in just above or below the link.
Very simple but good looking tooltip. This tooltip is available with rounded corners and also as a speech bubble tip.
Interesting tooltip plugin where you can set manually where your tooltip will show up.
Cool tooltip with nice transition effects.
Interesting good looking tooltip which appears above, below, on the right or left side of the link.
Simple tooltip but it could be useful to display an image when you hover over a link.
Various simple tooltips with fade in and fade out transition effects and border around them.
Have you seen a tooltip that makes an item…shine? Blind your visitors with magnificence!
Very simple tooltip with border around it, which follows your mouse.
Nice balloon style tooltip with transparency effect. There are available various tooltip styles, even interesting tooltips with cool animation, so you can choose one that fits best for your needs.
Various tooltip plugins for your website. Here you can find a simple tooltip with a nice fade transition and also you can find a good looking bubble style tooltip.
Simple tooltip which shows up when you hover over a link and stays until you close it.
Few simple but different tooltips.
Tooltip which appears on the right side of the link.
This is simple but useful tooltip for login form.
Simple tooltip with ajax loaded content. It has fade in and fade out transition effects.
Simple tooltip which shows up when you click on the arrow button and disappears when you click somewhere else.
Simple tooltip with rounded corners. It follows your mouse movements.
Get The Only Freelancer crash course you will ever need to read!
Peteris Kelle is 21 year old web designer. He has knowledge in various programs, such as Maya 3D, Flash, Photoshop, After Effects, Illustrator, etc. and also in various programming languages, such as Pascal, C, C++, Delphi, C++ Builder. He dedicates his free time to hobbies such as martial arts, mountain biking, snowboarding, playing Airsoft. Peter's aim is to start his own business. You can check Peter's works on his website. You can find him on Twitter or Myspace.
Sunday, April 29th, 2012 04:50
Thanks for this collection.
I tested most of them and decided to use number 6, “Tip Tip” from Drew Wilson.
Friday, April 27th, 2012 06:23
Nice collections of tooltip plugins. Glad I found qTip here, I already forgot its name because I
Sunday, April 8th, 2012 06:09
good information,,
may I show my script,, let me show in http://babeltekno.com/project/jQuery/babelBox/ver-0.1.php
this plugin can use as tooltips or window ,,, check it out
Friday, February 24th, 2012 19:04
Number 26 I’ll use for a project that requires strong passwords. With this tooltip the number of people complaining about not being able to register should dramatically drop.
Thursday, January 19th, 2012 06:33
Awesome tooltips, here is a creation of my own I created, very lightweight, using jquery.
Friday, January 13th, 2012 13:41
Great collection! Do you alsow know one, that can show a short video clip, when hovering?
Friday, January 6th, 2012 02:17
Hey thanks for the collection. I was searching for the most simple tooltip and found this one that uses the “title” attributes so is the most simple I found because there’s no need to do nothing.
Here’s the link: http://code.google.com/p/littletip/
But your collection is nice and I will check this too for a more personalized situations…
Thanks
Wednesday, November 30th, 2011 09:33
Thanks a lot 4 this cool collection of tooltips i have some used 4 my website. Its easy to include all the functions. Thanks and best regards
Tuesday, October 25th, 2011 04:53
Hi, Thanks for these information. But one thing, most of these script/plugin conflicts with WordPress when implementing them manually. This may be for different jQuery version, but how can i detect this ? is there a way ?
Wednesday, October 5th, 2011 06:00
Had been looking for a brilliant looking tooltip and this is the right place where I found it ….
Saturday, September 24th, 2011 04:30
These are great, but not exactly what I was looking for. Anybody know where to find – or even, the name to call the effect where you have a triangle wedged in the upper right corner of the page – that never moves? Even if user scrolls – the triangle stays there – solid. It’s a link to another page – to an offer, usually.
Anybody know what that thing is even called?
Thanks for any help!
Vern
Friday, May 13th, 2011 01:34
Yeah, thanks for the last 2 hours trying to get Prototip working. This post is for JQUERY not PROTOTYPE!!!! You should remove that one. dumbass
Friday, May 13th, 2011 11:30
Hi, really sorry for the inconvenience. I removed Prototip from the list now. Thanks for the heads up!
Wednesday, May 18th, 2011 14:37
Haha – who is the ? :) There’s two hours you’re never getting back. Maybe you learnt something,
Saturday, May 7th, 2011 14:19
can you have these for wordpress i need those plugins for jquery
Sunday, May 8th, 2011 07:54
Hi Hamza, yes I believe you can use these on WordPress with just a little tweak. :)
Tuesday, March 1st, 2011 18:15
Popup Bubble seems interesting to me.
Looks like they are going through maintainance process and I couldn’t get the codes to download..
Great list, anyways. Thanks.
Tuesday, January 26th, 2010 20:53
Thanks for the excellent resources, have used a few in my projects, but will be taking a closer look into the jQuery Ajax Tooltip.
Monday, January 25th, 2010 16:23
The Input Floating Hint Box is stellar, I have seen this functionality in other websites and was impressed back then, now I know the magic behind it and can’t wait to try it in my forms…
–
Thanks and Regards
Noel for Nopun.com
Monday, January 25th, 2010 12:13
Nice collection
Monday, January 25th, 2010 10:01
I think one of the most important factors is that the tooltips are lightweight. Some of those mentioned use images as part of the displayed bubble and on slow connections it can look unprofessional if these parts will only be loaded during the first display.
I mostly resort to the usage of simple title attributes since they are sufficient in most cases and don’t require any plug-ins or scripting.
Monday, January 25th, 2010 09:14
Very helpful stuff. I personally like the second one – simple pop up bubble. Might try to implement something like that.
Monday, January 25th, 2010 03:03
These are sick tooltips! jQuery can do almost anything these days, and I would love to implement some of these tactics on my blog. I’ll have to check out a few of these tutorials and see what I can implement.
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
babeltekno
Sunday, April 8th, 2012 06:09
good information,,
may I show my script,, let me show in http://babeltekno.com/project/jQuery/babelBox/ver-0.1.php
this plugin can use as tooltips or window ,,, check it out
Philipp
Friday, February 24th, 2012 19:04
Number 26 I’ll use for a project that requires strong passwords. With this tooltip the number of people complaining about not being able to register should dramatically drop.
Ianemv
Friday, April 27th, 2012 06:23
Nice collections of tooltip plugins. Glad I found qTip here, I already forgot its name because I
Thomas Vanhoutte
Sunday, April 29th, 2012 04:50
Thanks for this collection.
I tested most of them and decided to use number 6, “Tip Tip” from Drew Wilson.
Smashingwebs.com
Monday, January 25th, 2010 12:13
Nice collection
bob
Friday, May 13th, 2011 01:34
Yeah, thanks for the last 2 hours trying to get Prototip working. This post is for JQUERY not PROTOTYPE!!!! You should remove that one. dumbass
nick
Wednesday, May 18th, 2011 14:37
Haha – who is the ? :) There’s two hours you’re never getting back. Maybe you learnt something,
Rean John Uehara
Friday, May 13th, 2011 11:30
Hi, really sorry for the inconvenience. I removed Prototip from the list now. Thanks for the heads up!
GBaniya
Tuesday, March 1st, 2011 18:15
Popup Bubble seems interesting to me.
Looks like they are going through maintainance process and I couldn’t get the codes to download..
Great list, anyways. Thanks.
Hamza
Saturday, May 7th, 2011 14:19
can you have these for wordpress i need those plugins for jquery
Rean John Uehara
Sunday, May 8th, 2011 07:54
Hi Hamza, yes I believe you can use these on WordPress with just a little tweak. :)
Patrick Heck
Monday, January 25th, 2010 10:01
I think one of the most important factors is that the tooltips are lightweight. Some of those mentioned use images as part of the displayed bubble and on slow connections it can look unprofessional if these parts will only be loaded during the first display.
I mostly resort to the usage of simple title attributes since they are sufficient in most cases and don’t require any plug-ins or scripting.
Thomas
Tuesday, January 26th, 2010 20:53
Thanks for the excellent resources, have used a few in my projects, but will be taking a closer look into the jQuery Ajax Tooltip.
Inside the Webb
Monday, January 25th, 2010 03:03
These are sick tooltips! jQuery can do almost anything these days, and I would love to implement some of these tactics on my blog. I’ll have to check out a few of these tutorials and see what I can implement.
owl
Friday, January 13th, 2012 13:41
Great collection! Do you alsow know one, that can show a short video clip, when hovering?
Yuri
Friday, January 6th, 2012 02:17
Hey thanks for the collection. I was searching for the most simple tooltip and found this one that uses the “title” attributes so is the most simple I found because there’s no need to do nothing.
Here’s the link: http://code.google.com/p/littletip/
But your collection is nice and I will check this too for a more personalized situations…
Thanks
bono
Monday, January 25th, 2010 09:14
Very helpful stuff. I personally like the second one – simple pop up bubble. Might try to implement something like that.
vince
Wednesday, November 30th, 2011 09:33
Thanks a lot 4 this cool collection of tooltips i have some used 4 my website. Its easy to include all the functions. Thanks and best regards
Rob
Thursday, January 19th, 2012 06:33
Awesome tooltips, here is a creation of my own I created, very lightweight, using jquery.
Shazzad
Tuesday, October 25th, 2011 04:53
Hi, Thanks for these information. But one thing, most of these script/plugin conflicts with WordPress when implementing them manually. This may be for different jQuery version, but how can i detect this ? is there a way ?
Noel Wiggins
Monday, January 25th, 2010 16:23
The Input Floating Hint Box is stellar, I have seen this functionality in other websites and was impressed back then, now I know the magic behind it and can’t wait to try it in my forms…
–
Thanks and Regards
Noel for Nopun.com
Mike Fook
Saturday, September 24th, 2011 04:30
These are great, but not exactly what I was looking for. Anybody know where to find – or even, the name to call the effect where you have a triangle wedged in the upper right corner of the page – that never moves? Even if user scrolls – the triangle stays there – solid. It’s a link to another page – to an offer, usually.
Anybody know what that thing is even called?
Thanks for any help!
Vern
Razibul Hassan
Wednesday, October 5th, 2011 06:00
Had been looking for a brilliant looking tooltip and this is the right place where I found it ….