Tooltip jQuery tools, best 100 ! | Bypeople

Tooltip jQuery tools, best 100 !

One of the most important things when evaluating a website is realize if it offers enough hints and solutions to be found by the audience their navigation across the entire page, think of it as a sailor who needs to see the beacon’s light while approaching to the shore, there’s no way that the sailor will find the city’s Major waiting and guiding him to reach the dock, not even the sheriff will have time for that, but the beacon will always be there to enlighten the sailor’s way.

This showcase reunites the most important and useful tooltip scripts that can be easily implemented on your site. From AJAX and JavaScript solutions to some lite CSS and jQuery applications, you will find the nicest and well executed tooltip scripts and then check if any of these can fit to your needs.


Icon by Iconshock.

Background and features

Tooltips are among the most common graphical user interface elements, their functionality is strictly connected to the cursor behavior, showing up the tooltip after a roll over, roll out or click action. Since the era of Windows 95, tooltips were introduced to aid the user expand the information regarding the element that they were looking into but without having to display it all the time on the screen. A clear example of a tooltip is when you scroll over the eraser icon in Photoshop, a tooltip with the words “eraser tool” will show up, informing the user that this icon is affirmatively meant to be used for erasing elements within a Photoshop file.


Tooltips are extremely useful when the person is exploring for the first time a videogame, a website, an application or a program, because they make the user experience way much easier without disturbing him severely. Another use of tooltips is when you have large lists of elements and you don’t want to utilize larger images that will slow down your site and take over the whole interface, what you can do in that case is place a tooltip that people can click or roll over so they can find a larger preview of the object. In case you find the word “balloon” whilst studying tooltips, that’s just a way to describe tooltips that have precisely a balloon aspect reminiscent of the comic books dialogues. As for the term “infotip”, it’s referring to extended tooltips that expose more information than an average tooltip element.

Good tooltip practices

Tooltips can work in any place that requires additional information for the user to understand it entirely, but before we start studying the different tooltips that we can find over the internet, it’s very important to consider some simple rules that can differentiate a well done tooltip from a good one, let’s take a short view across this so-called rules:

  • Along with tooltips, you will often find the words “balloon” and “infotips”. Balloons are similar to tooltips but just like a balloon, they have a tail pointing to the source, so people can easily understand what’s the balloon actually explaining.
  • Infotips are extended tooltips that provide supplementary information that can be useful for the average user.
  • Tooltips should appear only through user interaction, while balloons can actually appear by their own.
  • If a button already has a label, it’s probably that the presence of a tooltip is not needed.
  • Use infotips only when tooltips are definitely not enough to provide the information you want regarding an specific element, otherwise it will be pure filling.
  • Try not to use tooltips for displaying a status, error message or warning, there are other elements to fulfill these tasks.
  • If the user will probably need to print the tips, then you shouldn’t utilize tooltips, a better option will be static comment fields.


  • Never try to replace a good design with tons of tooltips, that’s just an awful idea.
  • Make your tooltips as obvious to find as possible for your visitors.
  • Use time delay, it’s better that the tooltip shows up after about 0.5 seconds, continues to display 0.1 seconds after rolling over and completely banishes after no more than 4 seconds.
  • Be concise, use short sentences to describe the element, there’s no room for large speeches.
  • If you’re using a tooltip is because it provides additional information and not just repeats or changes the words but continues to say the same thing.
  • You can’t depend on tooltips, buttons and labels must speak for themselves as many people won’t notice the tooltips or will choose to ignore them.
  • If an element appears constantly from window to another, the tooltip must remain static so the user does not get any wrong signals.
  • Place well the tooltip, the tooltip must show up in a place where it does not sabotage what the user is doing, either by covering essential information, blocking input fields or covering the tooltip’s source itself.
  • Keep tooltips brief, the ideal tooltip is one that’s summed up in 5 words. less words might not describe properly the element and more than 5 will become more than a sentence.


  • Another good practice when making tooltips is to add shortcuts and default values to it, always frame these between parentheses.
  • Don’t use marketing language on your tooltips and infotips, it’s just not right.
  • Using synonyms is a good way of making accurate descriptions.


  • Use sentence-style capitalization for writing your tooltips.
  • Don’t use ending punctuation.
  • Focus on what users can do, it’s useless to just repeat the same information that is already written.
  • Avoid generic verbs and catch-all phrases like “and other programs”.


Now that we have studied the best practices when we’re talking about making a tooltip, we can proceed by checking those sites where the presence of tooltips is quite useful for helping the user understand the navigation system and where to go next:

Many e-commerce places make a good use of tooltips to expand the information regarding their products and we can realize that by visiting sites like eBay, Amazon or Iconshock, where tooltips fulfill an important function on the sites.


  1. In places like Iconshock, where visuals are the essence of the whole page, tooltips can be used to enlarge the previews and help people find the fittest designs for what they’re looking for.


  1. This tooltip is providing information regarding a new promotion offered on the Iconshock site, it’s a good idea to use a tooltip for this, due to the fact that people is more focused on buying icon sets and stuff. The small yellow button is attractive enough to make people rollover and find out the information regarding the promo.


  1. Similar to the Iconshock’s tooltip, when you roll over an item while searching on eBay, you will see a tooltip appear featuring some images of the product in question.


  1. Scrolling over a product will show a little tooltip where you find the article’s name, prize and amount of bids, which is the basic information that every costumer will need to know.


  1. Another example of proper tooltip implementing is the one found on the Digg login area. When you try to submit a link to the site and you’re not logged in, a tooltip will appear asking you to login or create an account.


  1. This tooltip says the obvious, but the idea of the designer was to implement it as a cute element inside the page that could also add some dynamism to it.


  1. In Mashable’s comment section, you will see a small tooltip showing up when you rollover a person’s name, the tooltip offers you the chance of seeing an extended profile of the person that left the comment.


  1. When you access an article at Meneame, you can take a look at the best comments section and see how a tooltip expands showing the complete quoted text of that specific comment.

Bad practices and problems

It’s certain that tooltips can be quite useful when you use them properly, following all the good practice rules and learning when and when not to use them, but as every thing, there are many sites that just can use the tooltips well, either if it’s for overusing them, breaking the time rules or just making them look bad.


  1. On Enlace you will find what we can call “a tooltip that should have been but wasn’t”. What we can expect from this ask mark is a tooltip showing up clarifying the issue, but instead of that we need to click and get transferred to another page, a complete waste of time.

Dealing with touchscreen and mobile devices

On these days, touchscreen devices have become more popular than ever. From the now famous iPhone to the TouchSmart computers, everything seems to be taking a step aside from relying on a mouse device. It’s from that moment when many people realized that tooltips as we know them will have no way to survive on this media, because they depend of the MouseOver action to show up and as we all know, there’s no such thing on touch devices, only click, release and drag.

Some people say that is time for the designers to start developing better interfaces that won’t need tooltips to be clear enough for the visitors, but that’s only a half way solution, because the tooltips that are designed to expand information or work as a preview are simply necessary on any good web design.


Icon by Iconshock.

We’re facing a major technologic problem that requires a solution because at the present time, the standard computers will keep the advantage and continue to use tooltips. There’s definitely something coming up that will bring tooltips back in the game, could it be more sensitive surfaces that can detect the MouseOver action when placing the finger or digital pen closer enough to the surface, or maybe this whole 3D revolution could provide the solution to this problem. Anyway, the paradigm of tooltips being rejected from the touch technology will remain until some genius comes out with the million dollars idea.

OK after this brief review about the tooltips subject, we like to introduce a great showcase featuring the nicest and most helpful tooltips to implement on your site, from the minimal to the Kitsch, everything was taken into account when arraying this showcase.

Our top selection

Before leaving you with the complete countdown, we like to show you our personal selection of tooltips, which were evaluated following different parameters, including design, functionality and language.

Prototip 2


  1. Probably the best tooltip around, Prototip allows you to easily create both simple and complex tooltips (all beautiful) using the Prototype JavaScript framework. You will find everything you may need on the homepage, from the documentation (troubleshooting, how to, installation instructions) to the download links and contact form.

  • Pros
  • Complete control over the tooltip’s position
  • Configurable rounded corners without using PNG
  • Sweet speech bubble effect.
  • Just a few codes needed to create new styles.
  • The tooltip works on every browser.
  • Tons of different styles and properties to work with.
  • Incorporated AJAX functionality
  • Display the tooltip in several positions
  • You can either trigger it by rolling over or clicking.
  • Insert HTML inside the tooltip and display large text blocks and images.
  • Excellent documentation that covers all the necessary aspects that people may look for.
  • Contras
  • Prototype is not a very common language, so it would be better if it was designed for jQuery or a similar library.
  • There’s no free-version for small developers, you’ll need to pay a fee in order to use it.
  • The troubleshooting section could be more extended that what is currently.
  • Note: Despite the fact that we included the payment as a contra, this could also be a pro because by purchasing Prototip you will earn access to full support and updates at no extra cost.

    jQuery Tools Tooltip | Demo


  1. Many great tooltip examples made with jQuery are located on this site, feel free to study them and decide which one fits best to your needs. From simple to rich, you can customize your tooltips to be as complex as you wish; through the CSS you can work with many parameters to fancy your tooltip.
  • Pros
  • Take advantage of the [title] attribute to work with more complex tooltips.
  • Switch between fading, sliding, dynamic or configure your own fancy effects.
  • Use the CSS to configure timing, design and positioning parameters.
  • Work with lot of values, including gradients, rounded corners, shadows and more
  • Small package, only 1.10 Kb.
  • Nice tooltip graphics to start working with immediately.
  • Add a fancy transition effect by playing with the opacity property.
  • You can place the tooltip in different positions, which makes a lot easier the implementation.
  • Complete documentation, including the API scripting, event functions and more.
  • A specific method is included to develop custom effects.
  • Contras
  • Although there is a clear and organized documentation, there’s not a proper troubleshoot section where the developers can look for advice and solutions.



  1. Lovely tooltips is a great plugin for the jQuery library, recommended for all programmers and developers. On the documentation section you will find all the necessary tips to set your tooltip, including position fixing, playing with the hide property, adjust how the contents are loaded and more. You will also be able to see some cool demos and download the latest version.
  • Pros
  • Simpletip can be either static, dynamic, or even loaded through Ajax with a variety of visual effects.
  • Good documentation, explaining the different properties and values that can be adjusted within the tooltip.
  • Well-explained instructions on how to install and implement Simpletip on your website.
  • Compatible with jQuery 1.2.x upwards.
  • The tooltip homepage itself has a nice appearance, comfortable for all the visitors.
  • Every effect and property shows the respective code and demo.
  • Great scripting API for users, fully functional.
  • Several key callback functions to extend the library’s functionality with your own custom methods.
  • Contras
  • The tooltip does not support Google Chrome.
  • To much focusing on promoting qTip, which reduces the attention paid to Simpletip.
  • The latest version of Simpletip is more than 1 year old.



  1. jQuery tooltip for use in field forms. Every time you roll over an ask mark, the tooltip will popup, showing a very elegant design with accurate readability, ideal to be implemented on corporative sites and / or minimalistic, we decided to put in our top selection due its design qualities and functionality.
  • Pros
  • The design of the tooltip itself is very elegant, managing a black and white color palette.
  • You can either implement it as a tooltip or infotip depending on your needs
  • Easily implement images and HTML inside the tooltip.
  • Place it on top of links without hiding them thanks to the facility of adjusting the position.
  • AJAX support included.
  • Contras
  • Poor documentation, there’s not enough information to read about.
  • There’s no troubleshooting section or “how to” guide, which difficult the understanding process.
  • The site is more focused on promoting the author but fails in assisting the tooltip’s users.
More brilliant tooltips

And from this point we like to list some additional tooltips that we found whilst developing our research, you will find different designs, programming languages and functions from one tooltip to another, grab some time to read the entire list and see which tooltip works the best for your needs.

Nice titles


Classic tooltip that uses a background to highlight in front of the site.

Nice titles revised | Demo


A revision to the original nice titles and a nice improvement in front of the classic one. The rounded corners detail is a good complement to the design.

Digg style post-sharing tool | Demo


Get inspired by Digg and learn how to make this particular tooltip.

Tooltip in ActionScript 3.0 | Demo


FlashTuts+ have brought to us this extended tooltip tutorial where you will learn how to take advantage of Flash for making a nice tooltip.

HelpBalloon | Demo


HelpBalloon.js features a few balloon examples to implement as help fields on your website.

jQuery plugin: Tooltip


Improve your jQuery library with these useful tooltips ready to be utilized.

qTip | Demo


qTip applies to more than just the links in most browsers, including IE 5,5 +, Safari, Firefox and Opera.

Form field hints with CSS and JavaScript | Demo


A good way of using CSS and JavaScript on a form, instead of all the tips showing at the same time, only the selected field will show its tooltip.

Balloon tooltip | Demo


Simple balloon tooltip that you can use on your own web applications.

CSS Bubble Tooltips


You can make pretty bubble tooltips without relying on JavaScript, only CSS.

Supernote | Demo


Dynamic tooltips that appear when executing a MouseOver or click action over an element.



Nice CSS/JS based popup tooltips, you can either choose to donate or free use this script, the developer deserves some credit for sure.

Ajax Tooltip | Demo


An Ajax-based tooltip, each time that you scroll over an object, the tooltip will show up.

jQuery Ajax Tooltip


Many references to the Coda Popup Bubble can be found here, but with some key differences that you will need to discover by yourself.

Title to Note | Demo


Easy way to show tooltips without covering any vital information in the process, nice tooltip.

Sweet Titles


Clean code, fancy tooltips, great fading effect.

Hover Tooltip | Demo


More than just a tooltip, this element has some basic menu capabilities.

Multiline Tooltip with HTML, CSS and JavaScript


Using just basic HTML, CSS and JavaScript knowledge you can make a great tooltip like this one.



Useful JavaScript gallery where you can provide your tooltips with different positions and appearances.

CSS Menu Descriptions


Using only CSS, you can create pretty tooltips like the one showed on the previous screenshot.



Fancy balloon demonstration, includes several styles to experiment whilst designing.

Lixlpixel CSS Tooltips


This set was inspired on Eric Meyer’s Pure CSS PopUps but adjusted to work as tooltips.

Lixlpixel JavaScript tooltips


Similar to the previous tooltip, only that this one has a JavaScript essence inside of it.



Pure CSS was utilized on the making of these great tooltips.

Pure CSS Tooltips


More CSS, you can see the code that was utilized during the developing of these tooltips.

More CSS Tooltips


Just another CSS tooltip design, the changes are noticeable in terms of color and structure.

Information Balloon pop-ups.


This is when tooltips are not enough and infotips or balloons become necessary.

JavaScript DHTML Tooltips


Despite the fact that we’re listing it as a single tooltip, you will find a lot of tooltip variations on this link, including image tooltips, formatted and more.

Animated Tooltip JavaScript


You will probably attracted to the tooltip with the background, because that’s not usual to see.

DOM Tooltip


With DOM tooltip the developers can incorporate their own customized tooltips to their websites.

YUI 2: Tooltip


An extension for Overlay that is analogous to show up tooltips within common operating systems.

WP Bubble Tooltip


Two different types of tooltips are included on this WordPress plugin that can instantly be incorporated in your site.

ClueTip: A jQuery Plugin


ClueTip plug-in lets you easily configure a link to show a “tooltip” when the user’s rolls over the link.

SuperNote v1 | Demo


XHTML/CSS/JavaScript powered tooltip system with a focused attention on accessibility.

Good-Looking Tooltips


A small JavaScript library that you can include for spicing up your site’s tooltips.

jQuery (mb) tooltip 1.6 | Demo


Elegant jQuery tooltip, you can find the documentation about it along with the download.

WebDev jQuery plugin


As simple as it gets without losing its aesthetics, useful tooltip for minimalistic interfaces.

Inline HTML tooltip


Quoting the site’s description, inline HTML Tooltip lets you define rich HTML tooltips that are embedded directly inside your webpage and that appear when the mouse rolls over links on your page. The tooltip appears directly beneath the anchor link, and adjusts its position dynamically based on whether the mouse is too close to the window’s edges.



HTML tooltip with a simple but effective design. You can look for additional information and options on the site.

URL screenshot preview with jQuery


Working with jQuery is one of the greatest things for programmers and developers, here you will see how to develop a fancy tooltip series using this great tool.

BeautyTips | Demo


BeautyTips is a handily to manage balloon-help style tooltip plugin.

CSS Tooltips using generated content and HTML5 | Demo


Another great advance on the internet has been definitely HTML5, with this new version you can design stunning tooltips such as this one.

Coda Popup Bubbles


Elegant and fancy tooltip that works with a mouse-hover function, ideal for classy sites and fashion related.

jQuery Awesomeness | Demo


This is a clear demonstration of how you can improve your tooltips by adding just some design points.

jQuery Popup Bubble | Demo


Very cool popup bubble, see how a simple RSS icon gets a lot of life by just adding the tooltip to it.

jQuery Horizontal Tooltips | Demo


So there’s a way to make tooltips a essential part of a horizontal menu, pretty cool.

TipTip jQuery Plugin


Another jQuery plugin, you have probably figured out by this point that prettifying a tooltip is not as hard as you may think.

CSS + JavaScript Tooltip | Demo


Useful tutorial with the necessary instructions for people to learn how to develop their own tooltips.



Pop! is a discrete JavaScript plugin for jQuery.

Speech-Bubble Tooltip using CSS3 and jQuery | Demo


Fancy tooltip with jQuery and CSS3, the subtle rounded details and the shadow are a great complement for the entire design.



As the description says, Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute.



An specific purpose is behind VTip, and it’s to become one of the lightest and yet nicest tooltip around.

Orbital Tooltip


Work with your tooltip’s position in a whole 360 area, that way you won’t intercept valuable information at any time.

Simple Tooltip with jQuery and CSS | Demo


Many simple tooltips are usually the ones preferred by developers and designers because that simplicity gives more creative freedom and this is definitely an example.



Quoting the site’s description, BetterTip is a plugin for the JQuery library that allows you to create custom tool tips. It is based on Cody Lindley’s jTip, but it is much more flexible.

JQ Tooltip


With this jQuery plugin you can create great tooltips with Ajax content.

The EZPZ Way


Easy peasy and with great results, definitely a nice way to work with tooltips.



Simple and elegant tooltip, you can access to the full code to use it for your own web designs.

jQuery & CSS tooltips


Learn how to develop a good looking tooltip with jQuery and CSS thanks to this article.

Mobile Tooltip Widget | Demo


This tooltip widget was designed to be implemented on Google Web Toolkit.

Slider DataPager with Dynamic Tooltips


Dynamic tooltips that show up while scrolling across this fancy slider.

Popup mode example


Simple tooltip that can be easily implemented on your site, you can check the entire code at the site.

Yet another Ajax Tooltip | Demo


Using AJAX to create it, this simple but effective tooltip has the capability to show external contents inside of it when displayed.

Custom CSS Tooltips


This is where a tooltip is well used, because it’s not only repeating the same information but providing some additional data to the person that’s seeing it.

Rich HTML Balloon Tooltip


According to the description, what sets this tooltip apart is where it gets the tooltip messages- from ordinary DIV elements on the page containing the desired tooltip content.

Description Tooltip


Move across the three different tooltip styles of this page and see which one fits you the better.

Textual tooltip II


The tooltip activates when you roll over a hyperlink, showing up a fading textual script.

Link floatie script


One of the easiest way to implement a tooltip without covering vital information during the process is by making them show up in one of the site’s corner, exactly like this tooltip does.

Link description script


Descriptive tooltips that provide additional information regarding the highlighted item.

Show Hint Script


Tooltips can be useful in form fields, because they can provide assistance to people when they’re not sure of what are they suppose to type in a specific field.

Textual tooltip Script


You can use this tooltip to provide your visitors additional information about the different links of the page.

Wowhead inspired tooltips | Demo


For all the World of Warcraft fans, here comes a Wowhead inspired tooltip set ready to be installed on your website.

Simple JavaScript tooltip scripts


A small list featuring some examples of what you can achieve with tooltips and a little creativity.



According to the site’s description, CoolTips is a lightweight unobtrusive JavaScript web-browser tooltips replacement technique.

Pure CSS Tooltips


Learn how to create great tooltips using CSS, nothing else but CSS.

CSS Tooltip for Joomla


Useful tooltip series to install as an extension for all the Joomla lovers out there.

Yet another jQuery tooltip plugin


Simple, elegant and colorful jQuery tooltip plugin, read the documentation before installing it in one of your web designs.

Awesome tooltips, all API


This is a wrapper class for the comctl32 api, it allows you to create awesome tooltips.

Amazing Tooltip


Let’s not forget about ActionScript, it’s still an amazing tool that you can use for making great things like these tooltips.

JSon | Demo


Really nice tooltips, it’s important to not only pay attention to the programming but to the design as well.

Simple Tooltips with CSS and jQuery | Demo


A few advanced tricks can lead you to create nice tooltips like these.

Useful and Practical jQuery Image ToolTips | Demo


Having tooltips to work as preview components is always a good idea to apply.

Easy CSS Tooltip


Easy and simple, this tooltip definitively works in minimalistic interfaces.

Tooltips with jQuery | Demo


Beautiful tooltip that reacts with a roll over action and shows up performing a fancy animation.

Flash Tooltips


Another tooltip application generated using Flash, as you can see the language competition is on.

Tooltip Pro V. 1.3


ActionScript 3.0 owns a lot of potential, as you can witness on this great

ClueTip | Demo


Different tooltip styles are included into this renewed version of ClueTip.

Tooltip for forms | Demo


Each field’s tooltip is displayed when rolling over a determined element.

Tooltip with shadow | Demo


You are able to see the text below the shadow, which is something that not every tooltip possesses.

Translucent Tooltips


Generate translucent tooltips with shadows, a good-looking solution for your web designs.

Thumbnail Hover Popup


When you roll over a thumbnail, a preview will pop up in a tooltip way, like the one that’s utilized on Iconshock.

Overlapping content script | Demo


Nice way of utilizing a tooltip, it not only shows additional information but posses a search bar and buttons inside of it.

Linkno Web Tooltips Builder | Demo


This is a powerful jQuery interface (GUI) for making stylish, feature-rich HTML tooltips for your web pages, keeping the effort to the minimum as well as the coding.

ActionScript 3 tooltips


And the last one, this is a pretty cool tooltip developed utilizing only ActionScript 3, really nice design.

Sexy Tooltip using CSS3 | Demo


The power of CSS3 can be witnessed on this lovely tooltip, the rounded corners and drop shadow effect are just a sample of the improvement on the design.

jQuery and CSS3 Simple Tooltip | Demo


Useful tooltip that among its features includes inserting HTML and images inside of it.

Well that’s it for this countdown, 100 of the nicest and most functional tooltips around. From those who appeal a very minimalistic look to the ones that actually fulfill and extended infotip function, providing vital information in reduced spaces. We hope that you find this post relevant to help you grow as a web developer and see many different ways of solving a particular issue, let us know about the M.I.A. tooltips that were not featured on the roundup so the whole community can learn about their existence, thanks for visiting Webdesignshock and remember to leave us a comment so we can realize how to keep improving the site for all of our visitors, we will truly appreciate it, see you soon.

Related Deals

Related Posts