qTip is a tooltip plugin for the jQuery framework. It’s cross-browser, customizable and packed full of features!
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.
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 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.
Provide an automatic box hint in the right side of an input, when focus on that input,
and disappear when focus go (blur).
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 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 is a jQuery for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute.
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.
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.
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.
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.