Tooltips are considered beneficial within being able to provide snippets of information to your website visitors without creating clutter in ones design. The Tooltip is regarded as a common graphical user interface element, and is used in conjunction with a cursor, most commonly a pointer. The user hovers the pointer over an item, ( without clicking it ), and an “infotip” [tooltip] may appear— which is a small “hover box” with a snippet of information about the item being hovered over.
Adding an attractive tooltip to your website isnt a difficult undertaking, although tooltips do not appear on mobile devices, ( since there is no cursor )- there are an innumerable different type of tooltip effects which one can find and incorporate into their web pages. There are quality scripts available for use which will allow one to set up any type of tooltip without coding it from scratch. In this post we present 10 of the Best jQuery tooltip plugin scripts.
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.
[button color=”black” size=”medium” link=”http://calebjacob.com/tooltipster/” target=”blank” ]Source[/button]
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.
[button color=”black” size=”medium” link=”http://paulkinzett.github.com/toolbar/” target=”blank” ]Source[/button]
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.
[button color=”black” size=”medium” link=”http://jamescryer.github.io/grumble.js/” target=”blank” ]Source[/button]
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.
[button color=”black” size=”medium” link=”http://git.aaronlumsden.com/progression/” target=”blank” ]Source[/button]
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.
[button color=”black” size=”medium” link=”http://www.opentip.org/” target=”blank” ]Source[/button]
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.
[button color=”black” size=”medium” link=”http://ipicture.justmybit.com/” target=”blank” ]Source[/button]
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.
[button color=”black” size=”medium” link=”http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin” target=”blank” ]Source[/button]
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.
[button color=”black” size=”medium” link=”http://code.drewwilson.com/entry/tiptip-jquery-plugin” target=”blank” ]Source[/button]
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.
[button color=”black” size=”medium” link=”http://qtip2.com/” target=”blank” ]Source[/button]
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.
[button color=”black” size=”medium” link=”http://tooltipsy.com/index” target=”blank” ]Source[/button]