← Visit Appcues.com
×
×

Top open-source tooltip plugins: jQuery, CSS, and JavaScript

The best free tooltip plugins known to Google.
Skip to section:

Skip to section:

[Editor’s note: An earlier version of this article listed 73 tooltip plugins. That felt like...a lot. We pared down the list to 17 items, because sometimes less really is more.]

Product and feature adoption relies on your ability to quickly bring users to that pivotal moment of value—your product’s aha moment.

Tooltips are powerful UI patterns designed to help prevent anything keeping your users from that moment. They help provide context to your users with minimal disruption, remove any friction or confusion, and help users continue on their way.

If you’re considering adding a tooltip to your product tours or feature release, there are dozens of open-source jQuery, CSS, and JavaScript plugins available on the web

📖  Read up on some of our top tips for using this small but mighty UI pattern correctly.

jQuery tooltip plugins

jQuery is a JavaScript library that was created to simplify development, which has made it the go-to cross-platform solution for developers. 

Its simplicity, compatibility, and built-in animation support already make it an effective way to add these UI features. Couple that with easy addition of plug-ins and a large, engaged community and jQuery makes for an especially adept language for handling animated tooltips. 

Some of the best jQuery tooltip plugins include:

1. Grumble.js

Language(s): jQuery

What we like about it: Animated and stylized jQuery tooltip bubbles that can be rotated around a given element at any angle.

This is an image of a round bubble shaped tooltip callout. It is an unusual tooltip. An orange bubble says bubble tastic. This tooltip plugin is made with jquery. It says grumble.js

2. Protip

This is a tooltip demo page. It shows a customizable jquery tooltip with an editor with multiple settings like trigger arrow title target animate mixin observer width scheme etc.

Language(s): jQuery
What we like about it: Intricate jQuery tooltip with multiple skins, placements, and animations, designed for “any situation.”

3. JBox

This is a screenshot of a tooltip that says "you have many options to position and animate your jboxes". This is a jquery tooltip plugin that is fully responsive.

Language(s): jQuery
What we like about it: A powerful and flexible jQuery plugin that also features modal windows and notices. Lightweight, customizable, and responsive.  

4. JqueryUI 

Language(s): jQuery

What we like about it: Can be easily added to any element using a tooltip() method.

5. Popper.js

Language(s):jQuery

What we like about it: Part of the popular library BootStrap, this plugin helps provide a very easy way to control where popups and tooltips appear.

CSS tooltip plugins

jQuery is a great option but can be limited by its functionality. 

CSS (Cascading Style Sheets) allow for smoother animations without stressing the hardware too much. That’s because CSS is natively supported on just about every web browser so you don’t need additional libraries or plugins. 

Building a tooltip in CSS allows you to leverage additional features inherent in the language such as using variables or pseudo-classes. For those who are looking for the added capabilities (or prefer to work in CSS), fear not. There’s a wealth of tooltip plugins made especially for you:

1. CSS Tooltip

This is a gif of a CSS tooltip animation. It shows an animated tooltip with righthand alignment. The button moves when the cursor hovers over it and a tooltip pops up.

Language(s): CSS
What we like about it: Simple tooltip with smooth animation made with HTML and CSS.

2. Fade-in tooltip

This is a gif showing a tooltip animation on social icons. It shows a tooltip plugin used on facebook twitter github pinterest and dribble social icons. This is an open source tooltip made with css

Language(s): CSS
What we like about it: Simple tooltip made featuring fade-in animation.

3. Microtip

this is an animated gif of a very simple tooltip's demo page. It shows the positioning of a css tooltip with top right left bottom etc options available in this lightweight tooltip library.

Language(s): CSS
What we like about it: Modern, minimal and very lightweight CSS-only tooltip library.

4. Wenk

This is a screenshot of a tooltip demo. The tooltip says I'm to the right and has an emoji in it. It is illustrating that this CSS tooltip can be displayed at different positions.

Language(s): CSS
What we like about it: Lightweight tooltip available made with CSS. Can be easily styled using attributes or classes.

5. Dynamic tooltip text

dynamic tooltip on button example

Language(s): CSS
What we like about it: Write JavaScript-less, dynamic tooltip text that changes relative to button state.

6. Simptip

This is an image of a simple css tooltip made with Sass. This is a simple ui pattern that canbe added to different positions. It shows a large tooltip logo and a small tooltip over underlined text that says "yup i'm here"

Language(s): CSS
What we like about it: CSS tooltip made with Sass, which is pretty cool.

7. Adaptive Tooltip

adaptive tooltip on hover over a cow icon

Language(s): CSS
What we like about it: Simple little adaptive css hover tooltip.

8. Tootik

tootik css tooltip library sampler

Language(s): CSS
What we like about it: A pure CSS/SCSS/LESS tooltip library with straightforward customization options. Easy to use.

9. First letter CSS property tooltip

css tooltip over linked text

Language(s): CSS
What we like about it: Simple tooltip with subtle fade-in/fade-out animation. Uses CSS and first letter CSS property.

JavaScript tooltip plugins

Should you need something more than just a simple, quick tooltip (jQuery) or modular code from CSS, JavaScript is likely to be your best option. This language allows for greater control over tooltip behavior while still seamlessly integrating with CSS. For instance, a JavaScript tooltip could API with another application, pull data on the user, and dynamically display information on that tooltip specific to the user.

If you’re looking for a more custom option, then one of these js tooltips may do the trick.

1. Tippy.js

This is an image from a javascript tooltip plugin demo page showing different types of tooltip interactivity. The two interaction options are hover and click.

Language(s): JavaScript
What we like about it: Highly customizable vanilla JS tooltip library with many possible interactions, animations, and themes. Can contain HTML, and has a ton of features like dropdown nesting and cursor follow.

2. Automatic Tooltips

This is an image of tooltips attached to text. This tooltip is made with javascript and is automatically positioned. The text explains that it is not a native tooltip so it can be styled and automatically positioned on any element according to title attrinbute.

Language(s): Javascript
What we like about it: Fully stylable javascript tooltip that can be automatically positioned.

3. Intro.js

This is a feature introduction tour with spotlights and tooltips. It is a step by step guide made using javascript tooltips. It has numbered tooltips and focus areas.


Language(s): JavaScript

What we like about it: Powerful, versatile product feature tour library for step-by-step guides. No dependencies, user-friendly.

What’s a tooltip?

Tooltips are a powerful tool in a UI designer’s kit that can significantly enhance user experience. Tooltips are the formal name of those ubiquitous little indicators that show you what you’re looking at within a software product, on a web page, or any other type of interface.

Some common ways to use tooltips include:

  • Onboarding - Showing users how to get comfortable
  • App walkthroughs - If your product handslNavigate complex interfaces and understand the functionality of various features.
  • Feature releases - Notifications about new features within your product can use tooltips to show users quickly and easily how to use the function quickly.
  • Field Definition - If a form the user is filling out requires information that they’re not certain of, tooltips can be used to provide more context.

How to use plugins to create custom tooltips with jQuery, JavaScript, and CSS

In software and web development, tooltips can be built using a variety of languages such as jQuery, JavaScript, or CSS. 

Each has their own strengths and weaknesses—if all you need is just a tooltip, a simple jQuery tooltip will likely do. It has beginner-friendly syntax and cross-browser compatibility but at the same time needs an external library. 

CSS meanwhile offers high performance and separates concerns but lacks interactivity compared to JavaScript. However, JS does allow for more intricate designs at the cost of portability and performance. 

Considering the wide range of devices on which applications may be viewed, responsive design is crucial to ensure seamless functionality across desktops, mobiles, tablets, or any other device. Understanding the situations most likely to be encountered using your product can give you or your developers a better idea of which language is the best fit. Finally, your chosen tooltip solution should be able to harness the full power of the abilities of HTML5 and CSS3.

What about no-code tooltips?

These open-source plugins work well for teams with enough bandwidth to code their own tooltips, but they’re not always great fits for every product team. 

Coding takes time and knowledge, and not every open-source solution out there offers robust functionality or pleasing aesthetic options.

That’s why more than 1,500 companies choose Appcues for their tooltip-building needs. It’s a no-code solution that combines ease of use with powerful features designed to improve your UX, including:

  • Behavior-triggered actions. Only activate tooltips for users who need them, when they need them.
  • Customized design. Create tooltips that look native to your app!
  • Versatility. Attach tooltips to both static and dynamic UI elements.
  • In-depth analytics. Analyze the performance of your product tours, feature announcements, and other in-app messaging efforts using Appcues’ powerful analytics tool.
  • Expert support. Take advantage of Appcues’ experienced support staff if and when questions arise while using the app.
  • Mobile functionality. Build knockout tooltips for both web and mobile apps.

Tooltips can make or break your product’s UX. If you want your product to become synonymous with words like “seamless,” “intuitive,” and “well-designed,” Appcues will help get you there.

Impress your users during onboarding with in-app messages from Appcues

SHOW ME THE TOOLTIPS

Want tooltips but don't have the dev resources to build them?

  • Appuces makes it easy to create native-looking tooltips, without tying up valuable dev resources
  • Improve product adoption using tooltips for walkthroughs, product tutorials, and feature announcements.
Charts and graphs
Author's picture
Katryna Balboni
Content and Community Director at User Interviews
Katryna is the Content and Community Director at User Interviews. Before User Interviews, she made magic happen with all things content at Appcues. Her non-work time is spent traveling to new places, befriending street cats, and baking elaborate pies.
Skip to section:

Skip to section:

[Editor’s note: An earlier version of this article listed 73 tooltip plugins. That felt like...a lot. We pared down the list to 17 items, because sometimes less really is more.]

Product and feature adoption relies on your ability to quickly bring users to that pivotal moment of value—your product’s aha moment.

Tooltips are powerful UI patterns designed to help prevent anything keeping your users from that moment. They help provide context to your users with minimal disruption, remove any friction or confusion, and help users continue on their way.

If you’re considering adding a tooltip to your product tours or feature release, there are dozens of open-source jQuery, CSS, and JavaScript plugins available on the web

📖  Read up on some of our top tips for using this small but mighty UI pattern correctly.

jQuery tooltip plugins

jQuery is a JavaScript library that was created to simplify development, which has made it the go-to cross-platform solution for developers. 

Its simplicity, compatibility, and built-in animation support already make it an effective way to add these UI features. Couple that with easy addition of plug-ins and a large, engaged community and jQuery makes for an especially adept language for handling animated tooltips. 

Some of the best jQuery tooltip plugins include:

1. Grumble.js

Language(s): jQuery

What we like about it: Animated and stylized jQuery tooltip bubbles that can be rotated around a given element at any angle.

This is an image of a round bubble shaped tooltip callout. It is an unusual tooltip. An orange bubble says bubble tastic. This tooltip plugin is made with jquery. It says grumble.js

2. Protip

This is a tooltip demo page. It shows a customizable jquery tooltip with an editor with multiple settings like trigger arrow title target animate mixin observer width scheme etc.

Language(s): jQuery
What we like about it: Intricate jQuery tooltip with multiple skins, placements, and animations, designed for “any situation.”

3. JBox

This is a screenshot of a tooltip that says "you have many options to position and animate your jboxes". This is a jquery tooltip plugin that is fully responsive.

Language(s): jQuery
What we like about it: A powerful and flexible jQuery plugin that also features modal windows and notices. Lightweight, customizable, and responsive.  

4. JqueryUI 

Language(s): jQuery

What we like about it: Can be easily added to any element using a tooltip() method.

5. Popper.js

Language(s):jQuery

What we like about it: Part of the popular library BootStrap, this plugin helps provide a very easy way to control where popups and tooltips appear.

CSS tooltip plugins

jQuery is a great option but can be limited by its functionality. 

CSS (Cascading Style Sheets) allow for smoother animations without stressing the hardware too much. That’s because CSS is natively supported on just about every web browser so you don’t need additional libraries or plugins. 

Building a tooltip in CSS allows you to leverage additional features inherent in the language such as using variables or pseudo-classes. For those who are looking for the added capabilities (or prefer to work in CSS), fear not. There’s a wealth of tooltip plugins made especially for you:

1. CSS Tooltip

This is a gif of a CSS tooltip animation. It shows an animated tooltip with righthand alignment. The button moves when the cursor hovers over it and a tooltip pops up.

Language(s): CSS
What we like about it: Simple tooltip with smooth animation made with HTML and CSS.

2. Fade-in tooltip

This is a gif showing a tooltip animation on social icons. It shows a tooltip plugin used on facebook twitter github pinterest and dribble social icons. This is an open source tooltip made with css

Language(s): CSS
What we like about it: Simple tooltip made featuring fade-in animation.

3. Microtip

this is an animated gif of a very simple tooltip's demo page. It shows the positioning of a css tooltip with top right left bottom etc options available in this lightweight tooltip library.

Language(s): CSS
What we like about it: Modern, minimal and very lightweight CSS-only tooltip library.

4. Wenk

This is a screenshot of a tooltip demo. The tooltip says I'm to the right and has an emoji in it. It is illustrating that this CSS tooltip can be displayed at different positions.

Language(s): CSS
What we like about it: Lightweight tooltip available made with CSS. Can be easily styled using attributes or classes.

5. Dynamic tooltip text

dynamic tooltip on button example

Language(s): CSS
What we like about it: Write JavaScript-less, dynamic tooltip text that changes relative to button state.

6. Simptip

This is an image of a simple css tooltip made with Sass. This is a simple ui pattern that canbe added to different positions. It shows a large tooltip logo and a small tooltip over underlined text that says "yup i'm here"

Language(s): CSS
What we like about it: CSS tooltip made with Sass, which is pretty cool.

7. Adaptive Tooltip

adaptive tooltip on hover over a cow icon

Language(s): CSS
What we like about it: Simple little adaptive css hover tooltip.

8. Tootik

tootik css tooltip library sampler

Language(s): CSS
What we like about it: A pure CSS/SCSS/LESS tooltip library with straightforward customization options. Easy to use.

9. First letter CSS property tooltip

css tooltip over linked text

Language(s): CSS
What we like about it: Simple tooltip with subtle fade-in/fade-out animation. Uses CSS and first letter CSS property.

JavaScript tooltip plugins

Should you need something more than just a simple, quick tooltip (jQuery) or modular code from CSS, JavaScript is likely to be your best option. This language allows for greater control over tooltip behavior while still seamlessly integrating with CSS. For instance, a JavaScript tooltip could API with another application, pull data on the user, and dynamically display information on that tooltip specific to the user.

If you’re looking for a more custom option, then one of these js tooltips may do the trick.

1. Tippy.js

This is an image from a javascript tooltip plugin demo page showing different types of tooltip interactivity. The two interaction options are hover and click.

Language(s): JavaScript
What we like about it: Highly customizable vanilla JS tooltip library with many possible interactions, animations, and themes. Can contain HTML, and has a ton of features like dropdown nesting and cursor follow.

2. Automatic Tooltips

This is an image of tooltips attached to text. This tooltip is made with javascript and is automatically positioned. The text explains that it is not a native tooltip so it can be styled and automatically positioned on any element according to title attrinbute.

Language(s): Javascript
What we like about it: Fully stylable javascript tooltip that can be automatically positioned.

3. Intro.js

This is a feature introduction tour with spotlights and tooltips. It is a step by step guide made using javascript tooltips. It has numbered tooltips and focus areas.


Language(s): JavaScript

What we like about it: Powerful, versatile product feature tour library for step-by-step guides. No dependencies, user-friendly.

What’s a tooltip?

Tooltips are a powerful tool in a UI designer’s kit that can significantly enhance user experience. Tooltips are the formal name of those ubiquitous little indicators that show you what you’re looking at within a software product, on a web page, or any other type of interface.

Some common ways to use tooltips include:

  • Onboarding - Showing users how to get comfortable
  • App walkthroughs - If your product handslNavigate complex interfaces and understand the functionality of various features.
  • Feature releases - Notifications about new features within your product can use tooltips to show users quickly and easily how to use the function quickly.
  • Field Definition - If a form the user is filling out requires information that they’re not certain of, tooltips can be used to provide more context.

How to use plugins to create custom tooltips with jQuery, JavaScript, and CSS

In software and web development, tooltips can be built using a variety of languages such as jQuery, JavaScript, or CSS. 

Each has their own strengths and weaknesses—if all you need is just a tooltip, a simple jQuery tooltip will likely do. It has beginner-friendly syntax and cross-browser compatibility but at the same time needs an external library. 

CSS meanwhile offers high performance and separates concerns but lacks interactivity compared to JavaScript. However, JS does allow for more intricate designs at the cost of portability and performance. 

Considering the wide range of devices on which applications may be viewed, responsive design is crucial to ensure seamless functionality across desktops, mobiles, tablets, or any other device. Understanding the situations most likely to be encountered using your product can give you or your developers a better idea of which language is the best fit. Finally, your chosen tooltip solution should be able to harness the full power of the abilities of HTML5 and CSS3.

What about no-code tooltips?

These open-source plugins work well for teams with enough bandwidth to code their own tooltips, but they’re not always great fits for every product team. 

Coding takes time and knowledge, and not every open-source solution out there offers robust functionality or pleasing aesthetic options.

That’s why more than 1,500 companies choose Appcues for their tooltip-building needs. It’s a no-code solution that combines ease of use with powerful features designed to improve your UX, including:

  • Behavior-triggered actions. Only activate tooltips for users who need them, when they need them.
  • Customized design. Create tooltips that look native to your app!
  • Versatility. Attach tooltips to both static and dynamic UI elements.
  • In-depth analytics. Analyze the performance of your product tours, feature announcements, and other in-app messaging efforts using Appcues’ powerful analytics tool.
  • Expert support. Take advantage of Appcues’ experienced support staff if and when questions arise while using the app.
  • Mobile functionality. Build knockout tooltips for both web and mobile apps.

Tooltips can make or break your product’s UX. If you want your product to become synonymous with words like “seamless,” “intuitive,” and “well-designed,” Appcues will help get you there.

Impress your users during onboarding with in-app messages from Appcues

SHOW ME THE TOOLTIPS

Want tooltips but don't have the dev resources to build them?

  • Appuces makes it easy to create native-looking tooltips, without tying up valuable dev resources
  • Improve product adoption using tooltips for walkthroughs, product tutorials, and feature announcements.
Charts and graphs
Author's picture
Katryna Balboni
Content and Community Director at User Interviews
Katryna is the Content and Community Director at User Interviews. Before User Interviews, she made magic happen with all things content at Appcues. Her non-work time is spent traveling to new places, befriending street cats, and baking elaborate pies.
You might also like...