Best Collection of Useful jQuery Tooltip Plugins and Tutorials

Thursday, September 24, 2009 7:38
Posted in category Ajax, Development, JavaScripts, Jquery

qTip – The jQuery Tooltip Plugin

qTip is a tooltip plugin for the jQuery framework. It’s cross-browser, customizable and packed full of features!

qtip

Prototip 2 – Create Beautiful Tooltips with Ease

Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework.

jquerytooltip4

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.

jquerytooltip16

jGrowl

jquerytooltip5

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.

jquerytooltip6

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.

jquerytooltip7

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.

jquerytooltip8

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).

jquerytooltip9

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.

jquerytooltip10

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

jquerytooltip12

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.

jquerytooltip14

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.

jquerytooltip20

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.

jquerytooltip21

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.

jquerytooltip22

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.

jquerytooltip24

Be Sociable, Share!
Father's Day Promo $40 OFF on ANY orrder
You can leave a response, or trackback from your own site.

Leave a Reply