Best Collection of Useful jQuery Tooltip Plugins and Tutorials

• View Demo

• Source

• View Demo

• Source

jQuery Ajax Tooltip

Our application is very person centric, so we wanted an easy way to pop up a “tooltip” with more information about a person whenever you see a person’s name. For example, here are some search results. When you hover over a name, more information appears.

jGrowl

Simpletip – A simple jQuery Tooltip Plugin

Simpletip is a plugin for the popular jQuery JavaScript library. It allows you to create tooltips with ease on any element on the page using the power of jQuery’s selectors and event management. The tooltips can be static, dynamic, or even loaded through AJAX with a variety of different visual effects.

jQuery plugin EZPZ Tooltip

There are a ton of tooltip plugins for jQuery out there, but I couldn’t find one that works with the way I think. To me, it’s a simple concept: You hover over a target element, then some content shows up. It should be flexible enough to customize the look and feel without requiring the bloat of any CSS or images. Hover targets should be mapped to their content counterparts by convention. I think I’ve built just that with the EZPZ Tooltip.

Coda Popup Bubbles

Coda is one of the new web development tools for the Mac – and it’s popular amongst designers and developers I know. Panic (the developers of Coda) are also known for their sharp design.

jQuery Input Floating Hint Box

Provide an automatic box hint in the right side of an input, when focus on that input,
and disappear when focus go (blur).

vTip

vTip is designed to quickly provide very lightweight (706b js, 272b CSS, 270b image) tooltips to users of jQuery. The zip includes everything you need (including an example page), as well as jQuery for the examples to work.

jTip – The Jquery Tool Tip

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

Tipsy – Facebook-Style Tooltip Plugin for jQuery

Tipsy is a jQuery for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute.

Create a Digg-Style Post Sharing Tool with jQuery

It’s all pretty straight forward and need a little bit of planning. The way it works is different with digg’s. If you view the html source code of Digg’s, it has the sharebox html code in every single post. But, in this tutorial we have only one sharebox, and all the links are sharing the same template.

Create a jQuery Popup Bubble

This technique could be used for lots of other things. Experimenting is the best way to learn new techniques, so go on, see what you can come up with.

jQuery Horizontal Tooltips Menu Tutorial

As usual, it’s a good practise to use UL List for menu. For the menu images, you need to put the caption in the ALT attribute, because jQuery will look at the ALT for it.

Creating A Simple Tooltip Using jQuery and CSS

There are multiple ways that these tooltips can be styled, nested, selected, etc. As I said, this is just a basic tooltip to get you started. Experiment with different tooltip positions, layouts, animations to find create the tooltip that best fills your needs.