The tooltip, popup or a hint, is a common GUI (graphical user interface) element. It is used in increase with a cursor, generally a indicator. When the user hovers their indicator over a exclusive item, without clicking it, a tooltip will find or a small “hover box” containing information about the item being hovered over.
The jQuery tooltip is one of the optimum building blocks one should contemplate utilizing within their web design and development. Tooltips resolution extra functionality and changeability, and can be regarded as one of the most grandly user-interface components for more websites.
In this blog I have collected 15 best jQuery tooltip plugins that will help you to generate innovative and creative web design and help you to achieve desired results for your web projects. I hope you will find this list of jQuery tooltip plugins handy and useful for your upcoming and current web pages.
--------------------------------------------
1. Tooltipster
Tooltipster is a powerful, flexible jQuery plugin enabling you to easily create semantic, modern tooltips enhanced with the power of CSS. Tooltipster allows you to use any HTML tag you can think of inside your tooltips. This means you can insert things like images and text formatting tags.
Source
2. Toolbar.js
Toolbar.js 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 flexability around the toolbars display and number of icons.
Toolbars can be attached to any element required. You can run as many toolbars as required. Toolbars are responsive and follow the element on resize. The implementation is pretty straightforward with simple options. It is released under MIT License.
Source
3. Grumble js
Grumble.js provides special tooltips without the usual limitations of north/east/south/west positioning. A grumble can be rotated around a given element at any angle, all 360 degrees. Any distance can be specified.
Any CSS style can be applied. There’s auto-magic size adjustment for use with localised text. FX queues for animating multiple grumbles. And it works in IE6+, and modern browsers. Image spriting is used for actual bubble image, you can change this as you want – it’s just CSS.
Source
4. Progression.js
Progression.js is a jQuery plugin that shows tips about an active form field and also displays the progress (how much of the form is filled). It uses the data attributes for storing the tips, has options for customizing the tooltip and can be implemented into any form so easily.
Source
5. Opentip
Opentip is a pretty cool JavaScript tooltips framework that can work with jQuery, Prototype or standalone.
It creates the tooltips with HTML5 canvas so that any creative designs are possible and they are rendered almost equally in all browsers. There is support for calling content into tooltips with Ajax, positioning them wherever wanted or grouping them (so that only one tooltip of the same group can stay open).
A nice and unique feature is stems (the little pointers) which auto-arranges themselves into any direction.
Source
6. iPicture
iPicture, a jQuery plugin, is perfect for such cases and allows us to place tooltips over any desired location of images. Once the user hovers/clicks the pointers, the tooltip is displayed with its pre-defined content. There are several options for customizing the functionality including the ability to use different pointer images for each tooltip or their animation types.
Also, iPicture has a handy initialize function that saves so much time by enabling a configuration wizard where we can place pointers + set their definitions with drag ‘n’ drops and the JSON output to be used in the code is created automatically.
Source
7. Joyride
Joyride is a plugin for jQuery that simplifies the process of guiding users to discover the features of a website. By defining the steps of the tour as an ordered list, the plugin displays desired information near any HTML element inside tooltips. The location of tooltips (bottom, top), scrolling speed of the page, cookie on/off and several other options exist for customization. To sum up, Joyride is a simple yet effective way of helping users find out the features of a website.
Source
8. TipTip
TinyTips is a very lightweight jQuery plugin that gives the ability to add tooltips to pretty much any element on a page. Thoroughly documented and designer friendly. TinyTips is very easy to install and use. Simply include TinyTips and the latest release of jQuery in the head. You can also give it a nice style by editing the stylesheet.
Source
9. qTip 2
qTip2 is the second generation of the advanced qTip plugin for the ever popular jQuery framework. Building on 1.0′s user friendly, yet feature rich base, 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.
qTip2 utilises a separate stylesheet to contain all tooltip styles, which allows you to easily add new styles without additional JavaScript code, as well as easily editing pre-existing styles.
Source
10. Tooltipsy
Tooltipsy is a jQuery plugin that provides a flexible base for creating tooltips. It comes with minimum default styles or animations but gives you the complete control over them. It can be positioned however you wish, look and feel can be totally customized with CSS and any type of animations can be implemented.
Source
No comments:
Post a Comment