[Editor’s note: An earlier version of this article listed 73 tooltip plugins. That felt like...a lot. We pared down the list to 19 items, because sometimes less really is more.]
When it comes to user onboarding, tooltips are a lot like road signs.
Road signs convey important information to drivers—and drivers shouldn’t need to slow down to understand them. A good tooltip works the same way. They concisely explain your product’s feature in a neat little text box, removing friction and helping users continue on their way.
These powerful UI patterns are widely used in product tours and feature releases for good reason. Product and feature adoption relies heavily on your ability to quickly bring users to that pivotal moment of value—your product’s aha moment. Whereas UI patterns like modal windows require a user’s acknowledgment and bring momentum to a halt, tooltips provide context to your users with minimal disruption.
📖 Read up on some of our top tips for using this small but mighty UI pattern correctly.
jQuery tooltip plugins
What we like about it: Plugin for making clean, modern tooltips with many possible interactions, themes, and triggers.
What we like about it: Animated and stylized tooltip bubbles that can be rotated around a given element at any angle.
What we like about it: Intricate tooltip with multiple skins, placements, and animations, designed for “any situation.”
What we like about it: A powerful and flexible plugin that also features modal windows and notices. Lightweight, customizable, and responsive.
What we like about it: Interactive jquery features tours. Quirky bubble style is visually interesting. Requires grumble.js (above).
What we like about it: Neat little jQuery plugin that makes tooltip-style toolbars for web apps and websites.
CSS tooltip plugins
For those who prefer to work in CSS, fear not. There’s a wealth of tooltip plugins made especially for you:
7. CSS Tooltip
What we like about it: Simple tooltip with smooth animation made with HTML and CSS.
What we like about it: Simple tooltip made featuring fade-in animation.
What we like about it: Modern, minimal and very lightweight CSS-only tooltip library.
What we like about it: Lightweight tooltip available made with CSS. Can be easily styled using attributes or classes.
What we like about it: CSS tooltip made with Sass, which is pretty cool.
13. Adaptive Tooltip
What we like about it: Simple little adaptive tooltip that appears on hover.
What we like about it: A pure CSS/SCSS/LESS tooltip library with straightforward customization options. Easy to use.
What we like about it: Simple tooltip with subtle fade-in/fade-out animation. Uses CSS and first letter CSS property.
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.
What we like about it: Fully styleable tooltips that can be automatically positioned.
What we like about it: Powerful, versatile product feature tour library for step-by-step guides. No dependencies, user-friendly.
19. HubSpot Tooltip
What we like about it: JS and CSS library for creating styleable tooltips. Built on Tether and Drop.
For your consideration: 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—coming soon! 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.