[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.
Language(s): jQuery
What we like about it: Plugin for making clean, modern tooltips with many possible interactions, themes, and triggers.
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.
Language(s): CSS
What we like about it: Simple tooltip with smooth animation made with HTML and CSS.
Language(s): CSS
What we like about it: Simple tooltip made featuring fade-in animation.
Language(s): jQuery
What we like about it: Animated and stylized tooltip bubbles that can be rotated around a given element at any angle.
Language(s): jQuery
What we like about it: Intricate tooltip with multiple skins, placements, and animations, designed for “any situation.”
Language(s): JavaScript
What we like about it: Very simple JavaScript tooltip solution with multiple skins, sizes, and interaction options.
Language(s): CSS
What we like about it: Modern, minimal and very lightweight CSS-only tooltip library.
Language(s): Javascript
What we like about it: Fully styleable tooltips that can be automatically positioned.
Language(s): jQuery
What we like about it: A powerful and flexible plugin that also features modal windows and notices. Lightweight, customizable, and responsive.
Language(s): CSS
What we like about it: Lightweight tooltip available made with CSS. Can be easily styled using attributes or classes.
Language(s): jQuery
What we like about it: Interactive jquery features tours. Quirky bubble style is visually interesting. Requires grumble.js (above).
Language(s): JavaScript
What we like about it: Powerful, versatile product feature tour library for step-by-step guides. No dependencies, user-friendly.
Language(s): CSS
What we like about it: Write JavaScript-less, dynamic tooltip text that changes relative to button state.
Language(s): jQuery
What we like about it: Neat little jQuery plugin that makes tooltip-style toolbars for web apps and websites.
Language(s): CSS
What we like about it: CSS tooltip made with Sass, which is pretty cool.
Language(s): JavaScript, CSS
What we like about it: JS and CSS library for creating styleable tooltips. Built on Tether and Drop.
Language(s): CSS
What we like about it: Simple little adaptive tooltip that appears on hover.
Language(s): CSS
What we like about it: A pure CSS/SCSS/LESS tooltip library with straightforward customization options. Easy to use.
Language(s): CSS
What we like about it: Simple tooltip with subtle fade-in/fade-out animation. Uses CSS and first letter CSS property.
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.
