73 Tooltip Plugins Made With jQuery, CSS, JavaScript or More!

.

From SaaS to Android apps, all web interfaces seem to use a tooltip or two. Most tooltip plugins are free, open source and easy to implement. Here are 73 for you to checkout and implement into your ux flows:

Opentip

Open tooltip Onboarding UX

Language(s): JavaScript or jQueryWhat we like about it: Comes with different pre-packaged styles.Link: http://www.opentip.org/

Tipsy

Tipsy jQuery tooltip

Language(s): jQueryWhat we like about it: Facebook-like tooltips based on an anchor tag’s title attribute.Link: http://onehackoranother.com/projects/jquery/tipsy/

PageNote Tooltips

PageNote Tooltips

Language(s): JavaScriptWhat we like about it: Super simple tooltip for academic papers.Link: http://pagenotes.com/pagenotes/tooltipTemplates.htm

Animated Tooltip JavaScript

Animated JavaScript Tooltip

Language(s): JavaScript with AjaxWhat we like about it: Easy to create tooltip with adjustable animations.Link: http://ashishware.com/Tooltip.shtml

Fixed Tooltip Script

Fixed Tooltip Script

Language(s): JavaScriptWhat we like about it: Anchor to a link’s position rather than following a mouse around. Be careful with this one, it anchored in a weird position for me.Link: http://www.dynamicdrive.com/dynamicindex5/fixedtooltip.htm

Cool DHTML Tooltip

Cool DHTML Tooltip

Language(s): JavaScriptWhat we like about it: Tooltip moves with your mouse as you hoverLink: http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm

Menucool’s JavaScript Tooltip

Menucool JavaScript tooltip Onboarding UX

Language(s): JavaScriptWhat we like about it: Hover, click and hijax link. smooth animations.Link: http://www.menucool.com/tooltip/JavaScript-tooltip

Extended Tooltips

Extended Tooltips

Language(s): JavaScriptWhat we like about it: Simple JavaScript tooltip.Link: http://www.felgall.com/jstip18.htm

Cool Tooltip

Cool Tooltip

Language(s): JavaScriptLink: http://www.texsoft.it/index.php?%20m=sw.js.htmltooltip&c=software&l=it

Tipster

Tipster

Language(s): JavaScriptWhat we like about it: Has all kinds of interesting options for interaction.Link: https://www.twinhelix.com/dhtml/tipster/demo/

Walter Zorn’s Tooltip.js

Walter Zorn's Tooltip

Language(s): JavaScriptWhat we like about it: Comes with useful command options to customize interaction.Link: http://www.walterzorn.de/en/tooltip/tooltip_e.htm#docu

qTip² jQuery Tooltip Plugin

qTip jQuery Tooltip Plugin

Language(s): JQueryWhat we like about it: Customize your kit with a few simple clicks and then grab your install code.Link: http://qtip2.com/download

Tooltipster

Tooltipster Onboarding UX

Language(s): JavaScript and jQueryWhat we like about it: Really clean and modern looking. Lots of downloads.Link: http://iamceege.github.io/tooltipster/

PowerTip

PowerTip

Language(s): jQueryWhat we like about it: This jQuery tooltip plugin has nice rules system to allow only one tooltip to be visible at a time.Link: http://stevenbenner.github.io/jquery-powertip/

HubSpot’s Tooltips

HubSpot's tooltips

Language(s): JavaScriptWhat we like about it: State of the art tooltips for all purposes.Link: http://github.hubspot.com/tooltip/docs/welcome/

Tipr

Tipr jQuery tooltip

Language(s): jQueryWhat we like about it: Small jQuery tooltip package.Link: http://www.tipue.com/tipr/

Protip—jQuery Tooltip Plugin

Protio - jQuery Tooltip Plugin

Language(s): jQueryWhat we like about it: Intricate tooltip too covers “any situation.”Link: http://protip.rocks/

JBox jQuery Plugin for Tooltips

JBox jQuery Plugin for Tooltips

Language(s): JQueryWhat we like about it: A powerful and flexible plugin that also features modal windows.Link: http://stephanwagner.me/jBox

Simple Tool Tip

Simple Tool Tip

Language(s): JavaWhat we like about it: A simple library to add tool tips to your awesome Android application.Link: https://android-arsenal.com/details/1/2526

Simptip—A Simple CSS Tooltip Made with Sass

Simptip—A Simple CSS Tooltip Made with Sass

Language(s): SassWhat we like about it: These tooltips are made with Sass, which is pretty cool.Link: http://arashm.net/lab/simptip/

Better Tooltip

Better tooltip

Language(s): jQueryWhat we like about it: Popular and simple tooltip.Link: http://code.tutsplus.com/tutorials/build-a-better-tooltip-with-jquery-awesomeness–net-3478

Responsive and Mobile-Friendly Tooltip

Responsive Mobile Friendly Tooltip

Language(s): JavaScript and jQueryWhat we like about it: This tooltip is made to be responsive and works well on mobile.Link: http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

Poshy Tip jQuery Plugin

Poshy tip jQuery plugin

Language(s): jQueryWhat we like about it: Poshy Tip also includes form tooltips for guidance.Link: http://vadikom.com/demos/poshytip/

Hovercard

Hovercard

Language(s): jQueryWhat we like about it: Instead of a simple tooltip, this plugin gives you the ability to build content on a card format.Link: http://designwithpc.com/Plugins/Hovercard

Grumble.js

Grumble.js bubble tooltip

Language(s): jQueryWhat we like about it: Animated and stylized tooltip bubbles.Link: http://jamescryer.github.io/grumble.js/

Colortip

Colortip

Language(s): jQueryWhat we like about it: Very simple jQuery tooltip plugin.Link: http://demo.tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/colortips.html

TinyTips – Pretty Lightweight jQuery Plugin

TinTips lightweight jquery plugin

Language(s): jQueryWhat we like about it: Easy to install.Link: http://www.htmldrive.net/items/show/990/tinytips-1.1-pretty-lightweight-tooltips-plugin

Prototip²

Prototip

Language(s): JavaScriptWhat we like about it: Really simple with a lot of styles to start from.Link: http://www.webappers.com/demo/json-tooltip/#/a

CoolTips

Cooltips

Language(s): JavaScriptWhat we like about it: One of the simplest open source tooltips on the market.Link: http://wildbit.com/labs/cooltips/

Tipped

Tipped

Language(s): JavaScriptWhat we like about it: Very simple JavaScript tooltip solution that is customizable to your brand.Link: http://www.tippedjs.com/

Gips—Clean & Minimal Tooltips

Gips clean and minimal tooltips

Language(s): jQueryWhat we like about it: Very clean and simple free tooltip plugin.Link: http://egrappler.com/jquery-clean-and-simple-tooltips-gips/

JQuery Tooltip Plugin

jquery-tooltip-plugin-ss.jpg

Language(s): jQueryWhat we like about it: Simple and under MIT License.Link: http://gdakram.github.io/JQuery-Tooltip-Plugin/

JavaScript Kit—Ajax Tooltip

Ajax tooltip

Language(s): AjaxWhat we like about it: This tooltip kit runs on Ajax.Link: http://www.JavaScriptkit.com/script/script2/ajaxtooltip.shtml

JSON Tooltip

JSON Tooltip

Language(s): JSON and jQueryWhat we like about it: Comic-looking callouts.Link: http://www.webappers.com/2009/07/13/create-a-content-rich-tooltip-with-json-and-jquery/

Simpletip jQuery Plugin

Simpletip jQuery plugin

Language(s): jQueryWhat we like about it: A simple tool tip solution.Link: http://craigsworks.com/projects/simpletip/

jQuery MB.Tooltip

jQuery MB.Tooltip

Language(s): jQueryWhat we like about it: A slight upgrade from standard default tooltips.Link: http://pupunzi.open-lab.com/mb-jquery-components/mb-tooltip/

UniTip

Unitip

Language(s): JavaScriptWhat we like about it: Easily-customizable tool tip.Link: http://labs.unitinteractive.com/unitip.php

Annotator

Annotator

Language(s): JavaScriptWhat we like about it: Open-source tooltip library that can be added to any webpage.Link: http://okfnlabs.org/projects/annotator/index.html

Bubble Point Tooltips with CSS3 & jQuery

Bubble Point Tooltips with CSS3 & jQuery

Language(s): jQuery and CSS3What we like about it: Nice default bubble style tooltip.Link: https://css-tricks.com/bubble-point-tooltips-with-css3-jquery/

JavaScript Tooltips

JavaScript tooltips

Language(s): JavaScriptWhat we like about it: Standard JavaScript tooltip.Link: http://www.dyn-web.com/code/tooltips/

jQuery ToolTip

jQuery tooltip

Language(s): jQueryWhat we like about it: Standard jQuery tooltip.Link: http://speckyboy.com/2012/10/22/how-to-create-a-basic-jquery-tool-tip-plugin/

CSS-Only Tooltips

CSS-only tooltips

Language(s): CSSWhat we like about it: These tooltips function entirely off of CSS!Link: http://sixrevisions.com/css/css-only-tooltips/

CSS3 Tooltips

CSS3 Tooltips

Language(s): CSS3What we like about it: Tooltips made with CSS3 and no JavaScript or jQuery.Link: http://red-team-design.com/css3-tooltips/

ftw.tooltip

ftw.tooltip

Language(s): jQueryWhat we like about it: Dynamic tooltip solution.Link: https://plone.org/products/ftw.tooltip

ToolTip by RichFaces

ToolTip by RichFaces

Language(s): AjaxLink: http://livedemo.exadel.com/richfaces-demo/richfaces/toolTip.jsf?c=toolTip

Handy Tips

Handy Tips

Language(s): jQueryWhat we like about it: Customize tooltips by style, location, behavior or more.Link: http://www.dnnsharp.com/dnn/modules/handy-tooltips

Style-My-Tooltips jQuery Plugin

Style-My-Tooltips jQuery Plugin

Language(s): jQueryWhat we like about it: Enhances the look of default browser tooltips.Link: http://manos.malihu.gr/style-my-tooltips-jquery-plugin/

Smallipop

Smallipop

Language(s): jQueryWhat we like about it: A versatile jQuery plugin for tooltips and interactive tours.Link: http://projects.sebastianhelzle.net/jquery.smallipop/

jQuery and CSS3 Simple Tooltip

jQuery and CSS3 simple tooltip

Language(s): jQueryLink: http://www.htmldrive.net/items/show/681/jQuery-and-CSS3-Simple-Tooltip.html

Tooltipsy

Tooltipsy

Language(s): jQueryWhat we like about it: Very simple format with different styles for you to copy.Link: http://tooltipsy.com/samples

Joyride

Joyride

Language(s): jQueryWhat we like about it: Joyride is a very popular tooltip for feature tours.Link: http://zurb.com/playground/jquery-joyride-feature-tour-plugin

Codrops

Codrops

Language(s): jQueryWhat we like about it: Give website tours with codrops.Link: http://tympanus.net/codrops/2010/12/21/website-tour/

BeautyTips

BeautyTips

Language(s): jQueryWhat we like about it: Simple and pretty jQuery tooltip.Link: https://assets.lullabot.com/bt/bt-latest/DEMO/index.html

Tipso

Tipso

Language(s): jQueryWhat we like about it: Also exists as a Wordpress plugin.Link: http://tipso.object505.com/

Tooltip Shortcodes

Tooltip Shortcodes

Language(s): jQueryWhat we like about it: Easy to insert images and video.Link: http://themes.mysitemyway.com/infocus/shortcodes/jquery-tooltips/

jQuery Tooltips Plugin

jQuery Tooltips Plugin

Language(s): jQueryWhat we like about it: Not a ton of flexibility, but very lightweight.Link: http://codecanyon.net/item/cramie-jquery-tooltips-plugin/full_screen_preview/726943

jQuery Ajax Tooltip

jQuery Ajax tooltip

Language(s): jQuery and AjaxWhat we like about it: This one is built to display profile information on hover.Link: http://rndnext.blogspot.com/2009/02/jquery-ajax-tooltip.html

The Tooltip

The Tooltip

Language(s): CSS3What we like about it: This tooltip features nice transitions.Link: http://codecanyon.net/item/the-tooltip/150532?ref=lvraa

JavaScript Fading Tooltips

JavaScript fading tooltips

Language(s): JavaScriptWhat we like about it: Has cool fade-in effect.Link: http://www.dustindiaz.com/sweet-titles/

Tooltip.js

Tooltip.js

Language(s): JavaScriptWhat we like about it: You can create tooltips programmatically or by using CSS classes.Link: http://ajaxian.com/archives/tooltipjs-creating-simple-tooltips

Balloon.js

Baloon.js

Language(s): JavaScriptWhat we like about it: Easy balloon style tooltips.Link: http://mckay.cshl.edu/balloons3.html

Rich HTML Balloon Tooltip

Rich HTML balloon tooltip

Language(s): JavaScriptWhat we like about it: Can house rich HTML and images for messaging or other uses.Link: http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm

BubbleView

BubbleView

Language(s): JavaWhat we like about it: This bubble text tooltip works on Android apps.Link: https://android-arsenal.com/details/1/2609

EasyTipView

EasyTipView

Language(s): SwiftWhat we like about it: EasyTipView automatically positions the tooltip message, and presents the tooltips with nice animation.Link: https://maniacdev.com/2015/07/open-source-swift-component-for-easily-creating-informative-tooltips

Boostrap Tour

Language(s): jQueryWhat we like about it: Really simple product tours build off of bootstrap.Link: http://bootstraptour.com/

jQuery TourBus

jQuery TourBus

Language(s): jQueryWhat we like about it: Gives you full control of your tour; requires more customization.Link: http://ryanfunduk.com/jquery-tourbus/

Intro.js

Intro.js

Language(s): jQueryWhat we like about it: Very lightweight, flexible and easy to use. Has related user experiences worth taking a look at.Link: http://usablica.github.io/intro.js/

Guiders

Guiders

Language(s): JavaScriptWhat we like about it: Webpage articulates the value of guided tours.Link: http://www.jrpickhardt.com/guiders

Crumble

Crumble

Language(s): jQueryWhat we like about it: Bubble style is visually interesting.Link: http://blog.tommoor.com/crumble/

Hopscotch

Hopscotch product tour

Language(s): JSON, HTML5What we like about it: Comes with an API that allows you to better measure success and control rendering.Link: http://linkedin.github.io/hopscotch/

Shepherd

Shepherd

Language(s): JavaScriptWhat we like about it: Simple and elegant.Link: http://github.hubspot.com/shepherd/docs/welcome/

Hint.css

Hint CSS tooltip

Language(s): CSSWhat we like about it: Real simple tooltip with purely CSSLink: http://kushagragour.in/lab/hint/

Tourist.js

Tourist.js

Language(s): JavaScriptWhat we like about it: Looks good out fo the box. Has a step counter for multi-step tutorials.Link: http://easelinc.github.io/tourist/

Ty Magnin is the Director of Marketing at Appcues where he helps software products improve their new user onboarding experience. Ty was the first marketer at Work Market and has roots in poetry and film production.