The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear — a small “hover box” with information about the item being hovered over.
I have compiled few tutorials and jQuery Plugins for Tooltips.
Table of Contents
- 1. TinyTips – Lightweight jQuery Plugin for Tooltips
- 2. Flickr-Style Photo Tagging Using jQuery
- 3. TipTip Custom Tooltip jQuery Plugin with Zero Images
- 4. How to Build the New Visual Annotations with CSS3
- 5. Show Your Links as a Drop Down List with Pluralink
- 6. Greyscale Hover Effect with CSS & jQuery
- 7. Get a Closer Look with AnythingZoomer jQuery Plugin
- 8. Create a Content Rich Tooltip with JSON and jQuery
- 9. Replace Your Default Tooltip with Pretty (mb)Tooltip
- 10. Captify Displays Pretty Image Captions Appear On Rollover
- 11. Preview Images with imgPreview jQuery Plugin
- 13. Simple Transparent Tooltips with jQuery and CSS
- 15. Prototip 2 – Create Beautiful Tooltips with Ease
- 16. Easiest Tooltip and Image Preview Using jQuery
- 17. Coda Style Popup Bubble Tooltips with jQuery
- 18. Taggify Clickable Image Region Shows Popup Tooltip
- 20. Fade In and Out Tooltips for Prototype and Scriptaculous
- 21. Sweet Titles Transparent and Fading Tooltips
- 22. Prototip Most Features Tooltips for Prototype
1. TinyTips – Lightweight jQuery Plugin for Tooltips
TinyTips is a very lightweight jQuery plugin that gives the ability to add tooltips to pretty much any element on a page. Thoroughly documented and designer friendly.
2. Flickr-Style Photo Tagging Using jQuery
jQuery Photo Tagger comes in at about 1,000 lines of code. As such, you can either check out the project page or try the online demo for yourself. Please note that you have to hold CTRL key when clicking mouse to create hotspot.
3. TipTip Custom Tooltip jQuery Plugin with Zero Images
TipTip uses the title attribute just like the native browser tooltip does. However, the title will be copied and then removed from the element when using TipTip so that the browser tooltip will not show up.
TipTip only generates one set of popup elements total, rather then generating one set of popup elements for each element with TipTip applied to it. This helps speed things up and reduces processing time. The elements generated are all div elements and are appended to the end of the body element.
4. How to Build the New Visual Annotations with CSS3
ZURB has taught us How to Build the New Visual Annotations. The solution was not technically too complex. With Notable, they have embraced the concept of graceful degradation: they take advantage of new CSS techniques that degrade cleanly to older browsers.
6. Greyscale Hover Effect with CSS & jQuery
Greyscale Hover Effect with CSS & jQuery relies on CSS Sprites and a few lines of jQuery, but requires a bit of preparation before it can be implemented. It is not recommended for large scale projects and probably best for displaying portfolio pieces.
7. Get a Closer Look with AnythingZoomer jQuery Plugin
You have a small area. You mouse over it. An area pops up giving you a zoomed in closer look. This is a jQuery plugin that does it. I’m not going to tell you what you should use it for or elaborate use-case scenarios. Your own creativity can help you there.
8. Create a Content Rich Tooltip with JSON and jQuery
This tutorial will demonstrate how to build tooltips that are powered by jQuery, with information pulled from a JSON array.
9. Replace Your Default Tooltip with Pretty (mb)Tooltip
(mb)Tooltip is a beautiful tooltip for your webpage in jQuery.
10. Captify Displays Pretty Image Captions Appear On Rollover
Captify is a plugin for jQuery written by Brian Reavis to display simple, pretty image captions that appear on rollover. It has been tested on Firefox, Chrome, Safari, and the wretched Internet Explorer. Captify was inspired by ImageCaptions, another jQuery plugin for displaying captions like these.
11. Preview Images with imgPreview jQuery Plugin
Peter Higgins has created Dojo Zoomer. It is divided into 3 panels. By hovering over the image on the left panel, right panel dynamically displays the cropped portion of the image, so that you can focus explicitly on the portion of the main image that interests you.
13. Simple Transparent Tooltips with jQuery and CSS
15. Prototip 2 – Create Beautiful Tooltips with Ease
16. Easiest Tooltip and Image Preview Using jQuery
Easiest Tooltip and Image Preview is one of those tooltip-like bubble popups that appears when you roll over link or a thumbnail.
17. Coda Style Popup Bubble Tooltips with jQuery
Coda is one of the new web development tools for the Mac – and it’s popular amongst designers and developers.
18. Taggify Clickable Image Region Shows Popup Tooltip
Taggify is a web widget which allows bloggers and publishers enhance their sites by adding image tooltips linked to certain image’s reqions.
20. Fade In and Out Tooltips for Prototype and Scriptaculous
CoolTips is used to replace conventional web-browser tooltips. The tooltips get contents of title attribute, so it’s fully unobtrusive. CoolTips is an OO class based on Prototype JS and script.aculo.us frameworks.
21. Sweet Titles Transparent and Fading Tooltips
Sweet Titles Fading Tooptips is not a knock-off from NICE Titles nor is it trying to improve on Dunstan’s revised attempt. And it most definitely isn’t ripped from one of those event-handler infested scripts from Dynamic Drive .
22. Prototip Most Features Tooltips for Prototype