Resources for create tooltips using jquery and CSS

Tooltips are awesome, there’s simply no denying it. They provide a simple, predictable and straightforward way to provide your users with useful, context-sensitive information, and they look cool to boot. According wikipedia, tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small “hover box” with information about the item being hovered over. Tooltip is very useful, as explanatory of a link, an image or a specific word in a website.

And below I have collect some of beautiful tooltips using Jquery and CSS for you to put in your website.

Inline help tips
When creating a web app, you often need to present people with friendly help prompts that explain parts of your interface. One of the ways to do it is to have separate pages with help topics that you link to. However, this causes people to lose context of what they are doing and is not very user friendly.

Demo Install

Opentip

opentip is a javascript tooltip framework yes - it’s free, open source and comes with different styles!

Demo Install

qTip2

qTip2 allows you to use not only regular textual content, but also complex HTML from other elements on the site. It can even pull content in from other pages via jQuery's .ajax() functionality, and supports in-built titles and close button.

Demo Install

Tooltipster

A powerful, flexible jQuery plugin enabling you to easily create semantic, modern tooltips enhanced with the power of CSS.

Demo Install

Friendly Tooltip

If you are doing with responsive web design you should think of Friendly Tooltip.

Demo Install

CSS3 animating tooltip

tooltip with css3 and animating that make it look nice.

Demo Install

Tooltips in Pure HTML/CSS

Simply have an anchor tag (or any tag you like) with a child. The child will be hidden by default when the page loads and only shown when the parent is hovered over.

Demo Install

Hotspot Map - Powerful annotations and tooltips.

(premium) from codecanyon a nice tooltips on the image. Hotspot is a plugin for easily adding annotations, text, or other stuff to an image, on the exact locations that you want. It’s an old concept with one exception. It comes with a powerful editor for precise drawing and positioning of the spots. You can also edit settings, see a preview of the final result and the editor will generate the HTML and JS code for you!

Demo Buy