30 Best jQuery Tooltip plugins for 2016

jQuery Tooltip plugins allow users to display information on your website, when a user hovers the mouse pointer on a particular area of a websites. This can be useful for displaying important information to users without redirecting them to another part of a website. You can setup tooltips for your slideshows, image galleries, videos, notification bars and much more.

For this roundup we have created a list of 30 Best jQuery Tooltip plugins for 2016 which we feel are best and provide you amazing tooltip functionality for your websites easily. These plugins has myriad of powerful features to make your websites multi functional and more user friendly.

1. Zebra Tooltip

zebra_tooltip
Zebra_Tooltips is a lightweight (around 6KB minified, 1.9KB gzipped) jQuery plugin for creating simple but smart and visually attractive tooltips, featuring nice transitions, and offering a wide range of configuration options.

The plugin detects the edges of the browser window and makes sure that the tooltips always stay in the visible area of the browser window by placing them beneath or above the parent element, and shifting them left or right so that the tooltips are always visible.
Demo & Download

2. Protip

protip
Protip is a new generation jQuery tooltip plugin for any situation. It has 49 positions, icon support, animations auto-hide, live refresh of tooltip options, gravity, skins, sizes, schemes and much more.
Demo & Download

3. ggpopover.js

ggpopover
ggpopover.js is a simple jQuery popover plugin extended from Bootstrap’s popover plugin that supports 4 positions, title background color, title font color, title border color, content background color, content text color, arrow color without using images.
Demo & Download

4. jQuery.mousetip

jquerymousetip
jQuery.mousetip is a lightweight jQuery plugin for creating cursor tooltips that follow mouse movement and position.
Demo & Download

5. EveryTip

everytip
EveryTip is a Jquery plugin that will read out any element’s title tag and converts it into a individual styleable dynamic tooltip.

You can apply it on any element you want e.g.: img, a , li, span, div and so on. The plugin automatically detects all elements of your specified type on the whole page and add’s a tooltip to it. It also supports inside HTML, so you can display all HTML tags inside a tooltip.
Demo & Download

6. ggtooltip.js

ggtooltipjs
It’s a simple jQuery tooltip plugin extended from Twitter Bootstrap’s tooltip plugin that support 4 positions, background color, font color and border color without using images.
Demo & Download

7. Tipso

tipso
Tipso is a simple jQuery tooltip plugin that displays a responsive, animated, fully customizable tooltip when the visitor hovers over (or clicks on) the matched element.
Demo & Download

8. awTooltip

awtooltip
awTooltip is a tooltip plugin created with css and jQuery. It’s possible to show tooltips right, left, top or bottom of the elements. Also you can use colourful tooltip styles.
Demo & Download

9. WebUI Popover

webui popover
WebUI Popover is a lightweight jQuery popover plugin that enchance the popover plugin of Bootstrap with some awesome new features. It works well with Bootstrap.
This plugin is fast, lightweight and supports more placement, different styles, support async mode, support url and iframe and much more.
Demo & Download

10. jqEasytooltip

jq easy tooltip
jqEasytooltip is an easy and customizable jQuery plugin, built in css3 and well-designed JavaScript This plugin features a lot of design themes, css3 transition effects, and more than 300 icons from font awesome included for users. All customization can be handled via jQuery Options, HTML 5 data-attributes and CSS!
Demo & Download

See Also —
15 Free jQuery Lightbox Plugins
10+ Best jQuery Search Plugins

11. popModal

popModal
popModal is a jQuery plugin for showing tooltips, titles, modal dialogs.
Demo & Download

12. jBox

jbox
jBox is a powerful and flexible jQuery plugin, taking care of all your popup windows, tooltips, notices and more.
Demo & Download

13. DarkTooltip

darktooltip
DarkTooltip is a simple customizable jQuery tooltip plugin with confirm option and 3D effects.
Demo & Download

14. qTip2

qTip2
qTip2 is the second generation of the advanced qTip plugin for the ever popular jQuery framework. qTip2 provides you with tonnes of features like speech bubble tips and imagemap support, and best of all… it’s completely free under the MIT/GPLv2 licenses!
Demo & Download

15. jQuery Media Tooltip

jQuery Media ToolTip
jQuery Media Tooltip is another great jQuery tooltip plugin which allows you to add tooltips to anytype of media you have.
This plugin supports YouTube, Vimeo, and Daily Motion, it has built in JW player, you can set position of tooltips with this plugin and set redirect to a link and also set size of tooltip.
Demo & Download

16. Toolbar

toolbarjs
Toolbar allows you to quickly create tooltip style toolbars for use in web applications and websites. The toolbar is easily customisable using the Twitter Bootstrap icons and provides flexibility around the toolbars display and number of icons.
Demo & Download

17. Balloon

balloon
Balloon is a jQuery plugin to add balloon tips to elements user-friendly, fine-tunable and without css and images.
Demo & Download

18. sBubble

sbubble
sBubble is a jQuery tooltip plugin which is totally based on CSS3 for shapes and animations. Yes no images used and no jQuery code used for animation. Plus some color themes are also provided.
Demo & Download

19. Tipped

tipped
Tipped allows you to easily create beautiful tooltips using the jQuery Javascript library. Evolved from the popular Prototip library, Tipped takes tooltips to the next level by using HTML5 to give you full control over the look and feel of your tooltips.
Demo & Download

20. Cramie jQuery Tooltips Plugin

jQuery Tooltips Plugin
jQuery Tooltips plugin is a jQuery plugins to display tooltips text. There are 6 colors available: yellow, black, white, red, blue, green. But, it’s easily customizable and you can add more colors to suit your website’s design. You can choose to display the tooltip in 3 locations, on the top of the page, the bottom of the page, or floating over the element.
Demo & Download

21. Tooltipster

tooltipster
Tooltipster is a lightweight jQuery plugin that enables you to easily create clean, HTML5 validated tooltips. It supports HTML tags inside the tooltip, lightweight and degradable, extremely flexible and fast to setup, and plays nicely with IE.
Demo & Download

22. TinyTip

tinytip
TinyTip is a very small tooltip jQuery plugin without using CSS. TinyTip does not force any styling over your tooltips, you can style your tooltips as desired. It also allows you to display any content, texts, html and Dom elements inside your tooltips.
Demo & Download

23. jQuery Tooltipify

jquery tooltipify
Tooltipify plugin creates a slide in, stylable tooltip to replace the default browser tooltip. Show and hide events are customizable. Defaults are “mouseover” and “mouseout”.
Demo & Download

24. Tipsy

tipsy
Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute.
Demo & Download

25. LiteTooltip.js

litetooltipjs
This is a powerful responsive tooltip plugin comes with valid HTML and CSS3. This is one of the most popular jQuery tooltip plugin which comes with 12 positions, menu templates, image map areas, color present & templates, video tooltip, image hotspots, and much more.
Demo & Download

26. SimpleToolTip

simpletooltip
Simpletooltip is a jQuery plugin, thought to insert short tooltips to any element of your website more easily.
Demo & Download

27. iTip

itip
iTip (Icon Tooltip) is a jQuery plugin that allows you to quickly add a tooltip filled with icons to any HTML element. The plugin uses ‘animate.css’ for some awesome css3 animations and ‘modernizr’ to make sure the plugin works in browsers that do not support css3 animations.
Demo & Download

28. PowerTip

powertip
PowerTip features a very flexible design that is easy to customize, gives you a number of different ways to use the tooltips, has APIs for developers, and supports adding complex data to tooltips. It is being actively developed and maintained, and provides a very fluid user experience.
Demo & Download

29. Colortip

colortip
Colortip is a simple jQuery tooltip plugin. It is going to convert the title attributes of elements within your page, into a series of colorful tooltips. Six color themes are available, so you can easily match it with the rest of your design.
Demo & Download

30. Metro Tooltip

metrotooltip
Metro Tooltip is a powerful tooltip plugin which shows information in metro style to the users. This plugin is lightweight, easy to setup, retina ready and includes HTML colors, 24 different animations, and much more.
Demo & Download

Final Words

Tooltips can be handy while showing short notice and information on your websites. Above mentioned plugins are very useful for setting up such feature. Let us know which one is your favourite and if we missed any, let us know by posting a comment below, we would love to add that plugin in the list.

Leave a Reply