<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=780827422028417&amp;ev=PageView&amp;noscript=1">

Get strategies on onboarding every Thursday

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

Written by: Ty Magnin Ty Magnin 


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:

Opentip

Opentip tooltip

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

Tipsy

Tipsy jQuery tooltip

Language(s): jQuery
What 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): JavaScript
What 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 Ajax
What 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): JavaScript
What 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): JavaScript
What we like about it: Tooltip moves with your mouse as you hover
Link: http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm

Menucool JavaScript tooltip

Language(s): JavaScript
What 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): JavaScript
What we like about it: Simple JavaScript tooltip.
Link: http://www.felgall.com/jstip18.htm

Cool Tooltip

Cool Tooltip

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

Tipster

Tipster

Language(s): JavaScript
What 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.js

Language(s): JavaScript
What 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): JQuery
What 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

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

PowerTip

PowerTip

Language(s): jQuery
What 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): JavaScript
What 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): jQuery
What we like about it: Small jQuery tooltip package.
Link: http://www.tipue.com/tipr/

Protip—jQuery Tooltip Plugin

Protio - jQuery Tooltip Plugin

Language(s): jQuery
What 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): JQuery
What 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): Java
What 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): Sass
What 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): jQuery
What 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 jQuery
What 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): jQuery
What we like about it: Poshy Tip also includes form tooltips for guidance.
Link: http://vadikom.com/demos/poshytip/

Hovercard

Hovercard

Language(s): jQuery
What 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): jQuery
What we like about it: Animated and stylized tooltip bubbles.
Link: http://jamescryer.github.io/grumble.js/

Colortip

Colortip

Language(s): jQuery
What 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): jQuery
What 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): JavaScript
What 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): JavaScript
What we like about it: One of the simplest open source tooltips on the market.
Link: http://wildbit.com/labs/cooltips/

Tipped

Tipped

Language(s): JavaScript
What 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): jQuery
What 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): jQuery
What 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): Ajax
What 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 jQuery
What 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): jQuery
What we like about it: A simple tool tip solution.
Link: http://craigsworks.com/projects/simpletip/

jQuery MB.Tooltip

jQuery MB.Tooltip

Language(s): jQuery
What 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): JavaScript
What we like about it: Easily-customizable tool tip.
Link: http://labs.unitinteractive.com/unitip.php

Annotator

Annotator

Language(s): JavaScript
What 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 CSS3
What 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): JavaScript
What we like about it: Standard JavaScript tooltip.
Link: http://www.dyn-web.com/code/tooltips/

jQuery ToolTip

jQuery tooltip

Language(s): jQuery
What 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): CSS
What 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): CSS3
What 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): jQuery
What we like about it: Dynamic tooltip solution.
Link: https://plone.org/products/ftw.tooltip

ToolTip by RichFaces

ToolTip by RichFaces

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

Handy Tips

Handy Tips

Language(s): jQuery
What 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): jQuery
What 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): jQuery
What 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): jQuery
Link: http://www.htmldrive.net/items/show/681/jQuery-and-CSS3-Simple-Tooltip.html

Tooltipsy

Tooltipsy

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

Joyride

Joyride

Language(s): jQuery
What 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): jQuery
What we like about it: Give website tours with codrops.
Link: http://tympanus.net/codrops/2010/12/21/website-tour/

BeautyTips

BeautyTips

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

Tipso

Tipso

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

Tooltip Shortcodes

Tooltip Shortcodes

Language(s): jQuery
What 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): jQuery
What 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 Ajax
What 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): CSS3
What 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): JavaScript
What we like about it: Has cool fade-in effect.
Link: http://www.dustindiaz.com/sweet-titles/

Tooltip.js

Tooltip.js

Language(s): JavaScript
What 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): JavaScript
What 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): JavaScript
What 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): Java
What we like about it: This bubble text tooltip works on Android apps.
Link: https://android-arsenal.com/details/1/2609

EasyTipView

EasyTipView

Language(s): Swift
What 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

Bootstrap Tour

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

jQuery TourBus

jQuery TourBus

Language(s): jQuery
What 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): jQuery
What 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): JavaScript
What we like about it: Webpage articulates the value of guided tours.
Link: http://www.jrpickhardt.com/guiders

Crumble

Crumble

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

Hopscotch

Hopscotch product tour

Language(s): JSON, HTML5
What 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): JavaScript
What we like about it: Simple and elegant.
Link: http://github.hubspot.com/shepherd/docs/welcome/

Hint.css

Hint CSS tooltip

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

Tourist.js

Tourist.js

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

Recommended reading

Code-Free User Onboarding Ebook cover

Free Ebook: Code-Free User Onboarding

From sign-up to success