Tuesday, January 3, 2012

Best jQuery Tooltip Plugins

Tooltips are very importa in website design. In mouse hover out the extra information show hide without hampering basic design or the main information.

Mostly Tooltip is hidden by default, when user hovers the cursor over an element it show extra information. jQuery make very easy to add an attractive tooltip to your website. Browsers will automatically display a tooltip when you provide a title attribute. Internet Explorer will also use the alt attribute.

qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework. Built from the ground up to be user friendly, yet feature rich, qTip provides you with tons of features like rounded corners and speech bubble tips, and best of all… it’s completely free under the MIT license!

Tooltip may be one of the most used tooltip plugins for jQuery. You can setup multiple tooltips on the same page that use different appearances as well as use PNG background images that render well in IE by simply using a built-in fixPNG option. This tooltip lis licensed under MIT/GPL.
Simpletip is exactly like it sounds; a simple jQuery tooltip plugin. Written by Craig Thompson, SimpleTip allows you to create tooltips with ease on any element on the page. The tooltips can be static, dynamic, or even loaded through AJAX with a variety of different visual effects.. Simpletip is the predecessor to qTip listed above.

BeautyTips is a jQuery tooltips plugin which uses the canvas drawing element in the HTML5 spec to dynamically draw tooltips (sometimes called “talk bubbles” or “help balloons”) associated with a html element on the page. These tips are highly configurable and can be triggered in many different ways.

jTip pulls content into a tool tip using the HttpXMLRequest object. By adding a class attribute value of “jTip” to a link element you can create a tooltip from the content found in the file the href is pointing too. Additionally it’s possible to provide a link (via url query string) to a jTip tool tip link element (a href) so that the link will still function as expected by the user.

jQuery Tools: Tooltip
This tool corrects the situation. You’ll get a professional piece of sofware that is easy to understand and use. The tooltip plugin comes with two default effects: slideup and toggle and you can easily build your own effects. Positioning is flexible and there are redundant features. Inside the tooltip you can have any combination of HTML such as images, tables and forms. Tooltips can appear in any size and at any opacity.

Coda Popup Bubbles
Coda is a web development tool for the Mac that is popular among designers and developers. This isn’t an actual plugin for jQuery but is a tutorial that will walk you through every step of creating Coda-like tooltips. Code is all available as well as a demo and screencast.

No comments: