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. tooltips00 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. tooltips01 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”.
tooltips04 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. tooltips08
  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. tooltips16
  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. tooltips17 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

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

Nice titles revised | Demo

tooltips02 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

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

Tooltip in ActionScript 3.0 | Demo

tooltips114 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

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

jQuery plugin: Tooltip

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

qTip | Demo

tooltips20 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

tooltips21 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

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

CSS Bubble Tooltips

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

Supernote | Demo

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


tooltips24 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

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

jQuery Ajax Tooltip

tooltips66 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

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

Sweet Titles

tooltips31 Clean code, fancy tooltips, great fading effect.

Hover Tooltip | Demo

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

Multiline Tooltip with HTML, CSS and JavaScript

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


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

CSS Menu Descriptions

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


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

Lixlpixel CSS Tooltips

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

Lixlpixel JavaScript tooltips

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


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

Pure CSS Tooltips

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

More CSS Tooltips

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

Information Balloon pop-ups.

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

JavaScript DHTML Tooltips

tooltips46 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

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

DOM Tooltip

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

YUI 2: Tooltip

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

WP Bubble Tooltip

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

ClueTip: A jQuery Plugin

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

SuperNote v1 | Demo

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

Good-Looking Tooltips

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

jQuery (mb) tooltip 1.6 | Demo

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

WebDev jQuery plugin

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

Inline HTML tooltip

tooltips58 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.


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

URL screenshot preview with jQuery

tooltips62 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

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

CSS Tooltips using generated content and HTML5 | Demo

tooltips119 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

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

jQuery Awesomeness | Demo

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

jQuery Popup Bubble | Demo

tooltips67 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

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

TipTip jQuery Plugin

tooltips70 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

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


tooltips72 Pop! is a discrete JavaScript plugin for jQuery.

Speech-Bubble Tooltip using CSS3 and jQuery | Demo

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


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


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

Orbital Tooltip

tooltips77 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

tooltips78 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.


tooltips79 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

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

The EZPZ Way

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


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

jQuery & CSS tooltips

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

Mobile Tooltip Widget | Demo

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

Slider DataPager with Dynamic Tooltips

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

Popup mode example

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

Yet another Ajax Tooltip | Demo

tooltips90 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

tooltips91 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

tooltips92 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

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

Textual tooltip II

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

Link floatie script

tooltips96 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

tooltips97 Descriptive tooltips that provide additional information regarding the highlighted item.

Show Hint Script

tooltips98 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

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

Wowhead inspired tooltips | Demo

tooltips100 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

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


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

Pure CSS Tooltips

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

CSS Tooltip for Joomla

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

Yet another jQuery tooltip plugin

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

Awesome tooltips, all API

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

Amazing Tooltip

tooltips107 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

tooltips108 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

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

Useful and Practical jQuery Image ToolTips | Demo

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

Easy CSS Tooltip

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

Tooltips with jQuery | Demo

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

Flash Tooltips

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

Tooltip Pro V. 1.3

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

ClueTip | Demo

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

Tooltip for forms | Demo

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

Tooltip with shadow | Demo

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

Translucent Tooltips

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

Thumbnail Hover Popup

tooltips59 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

tooltips95 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

tooltips74 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

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

Sexy Tooltip using CSS3 | Demo

tooltips117 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

tooltips120 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