A tooltip or infotip is a common graphical user interface element that provides snippets of useful information to your site visitors without creating clutter in your design.It’s a great building block that you should consider using within your web design and development. It’s usually used in combination with a cursor (usually a pointer). When a user hovers their pointer over a particular item without clicking it, a tooltip or a small “hover box” will appear which contains information about the item being hovered over.
Tooltips add extra functionality and versatility, making it an essential UI component for most websites. Adding it to your site is very easy, although tooltips don’t appear on mobile devices (since there’s no cursor). There are different types of tooltip effects available and you can incorporate them into your web pages.
There are lots of high-quality scripts out there that allow you to set up any type of tooltip without the need to touch a single line of code. Here are 10 of the very best jQuery tooltip plugins to makes things easier for you. We hope you’ll find them useful for your web projects.
Beauty Tips is a handy jQuery plugin that draws tooltips in real time, using the Canvas element. By default, every tooltip is displayed at the side of an element where there’s more space. But with this plugin, the position can be forced and content can be hard-coded, called from an attribute or with an AJAX request.
Toolbar.js lets you create tooltip style toolbars for your website or web application. The toolbar is easy to customize using the Twitter Bootstrap icons, and provides flexibility in terms of toolbar display and number of icons. The toolbars can be attached to any element, and you can even run as many toolbars as you want. These toolbars are fully responsive and follow the element on resize. Implementing it is easy and straightforward, with simple options. Toolbar.js is released under the MIT license.
This jQuery tooltip plugin provides unique tooltips without the usual limitations of north/south/east/west positioning. You can rotate a grumble around a given element at any angle, all 360 degrees. You can also specify any distance.
Tooltipster is a powerful and flexible jQuery plugin that allows you to easily create semantic, modern tooltips, enhanced with the power of CSS. It enables you to use any HTML tag possible inside your tooltips, which means you can insert things like images and text formatting tags.
This jQuery plugin makes it easy for you to guide your visitors to discover what your website has to offer. By defining the steps of the tour as an ordered list, the plugin will display the desired information near any HTML element inside the tooltips. You can also customize the tooltips’ location, the page’s scrolling speed, turn the cookie on/off, and several other options.
Colortip converts title attributes of elements within your page, into a series of attractive and colorful tooltips. There are 6 color themes available, so it easily blends with the rest of your design. It’s also easy to create your own tooltip design simply by adding 3 additional style classes to your stylesheet and adding an element to the supported colors.
This handy plugin shows tips on an active form field and displays the progress (how much of the form is filled). It uses the data attributes for storing the tips, and has options for customizing the tooltip. Implementing it into any form is a breeze.
Tooltipsy provides a flexible base for you to create tooltips. It features default styles and animations, and gives you complete control over them. It can be positioned however you want and you can customize the overall look and feel with CSS. You can also implement any type of animation.
This lightweight jQuery plugin is ideal for creating flexible tooltips. The tooltips can be attached to any element and can easily be styled in terms of presentation and positioning. These tooltips can be static, dynamic or loaded via AJAX. Any combination of effects can also be applied to make them more visually appealing.