← Visit Appcues.com
×
×

20 best open-source tooltip plugins made with CSS, jQuery, 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 20 items, because sometimes less really is more.]

Everyone loves a good tooltip! (We certainly do.) We’ve put together a list of the best open-source tooltip plugins made with jQuery, JavaScript, CSS, and more. All the plugins on this list are free to download and easy to implement into your onboarding UX.

(Psst—If all this tooltip talk sounds like a great idea, but you just don’t have the time or dev resources to do it right, check out Appcues for user onboarding and feature adoption. We make building custom tooltips so easy, anyone on your team can do it!)

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

20 free-to-download tooltips

1. Tooltipster

This is a picture of a jquery tooltip plugin default setting. It shows a trigger that says hover and a tooltip with a point that says Hi I am a tooltip.

Language(s):  jQuery
What we like about it: Plugin for making clean, modern tooltips with many possible interactions, themes, and triggers.

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

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

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

5. Grumble.js

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

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

6. 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 tooltip with multiple skins, placements, and animations, designed for “any situation.”

7. Tipped

This is a very simple javascript tooltip that has a powerful javascript api and built in Ajax support. It shows a screenshot of a tooltip with yes no options and two buttons.

Language(s): JavaScript
What we like about it: Very simple JavaScript tooltip solution with multiple skins, sizes, and interaction options.

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

9. 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 styleable tooltips that can be automatically positioned.

10. 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 plugin that also features modal windows and notices. Lightweight, customizable, and responsive.  

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

12. Crumble

This is an interactive produt feature tour for websites or apps made with an open source jquery tooltip plugin. The tooltip is styled and shaped like a bubble.

Language(s): jQuery
What we like about it: Interactive jquery features tours. Quirky bubble style is visually interesting. Requires grumble.js (above).

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

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

15. Toolbar.Js

This is an example of a tooltip toolbar made with jquery. It is an animated toolbar example made with a free plugin and has three icons.

Language(s): jQuery
What we like about it: Neat little jQuery plugin that makes tooltip-style toolbars for web apps and websites.

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

17. HubSpot Tooltip

This is a gif of a hubspot tooltip that you can download from Github. it is made with javascript and css and it built on tether and drop. It shows a tool tip at each of the directional positions going around a box. It is an animation showing that this js and css library can create customized tooltips with intelligent positioning.

Language(s): JavaScript, CSS
What we like about it: JS and CSS library for creating styleable tooltips. Built on Tether and Drop.

18. Adaptive Tooltip

adaptive tooltip on hover over a cow icon

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

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

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

No-code tooltips

There are plenty of reasons your non-technical teams may want to design, implement, and iterate on tooltips—whether it's for marketing inside your product or applying customer-facing expertise to your in-app experiences. But perhaps the best reason is that your developers simply have bigger fish to fry. Why should they be hard coding tooltips when they don't have to?

Appuces makes it easy to create native-looking tooltips, without tying up valuable dev resources.  Click here to see Appcues tooltips in action.

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 20 items, because sometimes less really is more.]

Everyone loves a good tooltip! (We certainly do.) We’ve put together a list of the best open-source tooltip plugins made with jQuery, JavaScript, CSS, and more. All the plugins on this list are free to download and easy to implement into your onboarding UX.

(Psst—If all this tooltip talk sounds like a great idea, but you just don’t have the time or dev resources to do it right, check out Appcues for user onboarding and feature adoption. We make building custom tooltips so easy, anyone on your team can do it!)

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

20 free-to-download tooltips

1. Tooltipster

This is a picture of a jquery tooltip plugin default setting. It shows a trigger that says hover and a tooltip with a point that says Hi I am a tooltip.

Language(s):  jQuery
What we like about it: Plugin for making clean, modern tooltips with many possible interactions, themes, and triggers.

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

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

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

5. Grumble.js

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

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

6. 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 tooltip with multiple skins, placements, and animations, designed for “any situation.”

7. Tipped

This is a very simple javascript tooltip that has a powerful javascript api and built in Ajax support. It shows a screenshot of a tooltip with yes no options and two buttons.

Language(s): JavaScript
What we like about it: Very simple JavaScript tooltip solution with multiple skins, sizes, and interaction options.

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

9. 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 styleable tooltips that can be automatically positioned.

10. 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 plugin that also features modal windows and notices. Lightweight, customizable, and responsive.  

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

12. Crumble

This is an interactive produt feature tour for websites or apps made with an open source jquery tooltip plugin. The tooltip is styled and shaped like a bubble.

Language(s): jQuery
What we like about it: Interactive jquery features tours. Quirky bubble style is visually interesting. Requires grumble.js (above).

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

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

15. Toolbar.Js

This is an example of a tooltip toolbar made with jquery. It is an animated toolbar example made with a free plugin and has three icons.

Language(s): jQuery
What we like about it: Neat little jQuery plugin that makes tooltip-style toolbars for web apps and websites.

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

17. HubSpot Tooltip

This is a gif of a hubspot tooltip that you can download from Github. it is made with javascript and css and it built on tether and drop. It shows a tool tip at each of the directional positions going around a box. It is an animation showing that this js and css library can create customized tooltips with intelligent positioning.

Language(s): JavaScript, CSS
What we like about it: JS and CSS library for creating styleable tooltips. Built on Tether and Drop.

18. Adaptive Tooltip

adaptive tooltip on hover over a cow icon

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

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

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

No-code tooltips

There are plenty of reasons your non-technical teams may want to design, implement, and iterate on tooltips—whether it's for marketing inside your product or applying customer-facing expertise to your in-app experiences. But perhaps the best reason is that your developers simply have bigger fish to fry. Why should they be hard coding tooltips when they don't have to?

Appuces makes it easy to create native-looking tooltips, without tying up valuable dev resources.  Click here to see Appcues tooltips in action.

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