Design Resources - Tooltips and Annotation
Whether you're looking for a smart and customizable tooltip implementation or want to display annotations or image captions in a clever way, there's bound to be some inspiration for you in this list. Our developers rounded up some of the best, most unique and just some of their favorite tools.
Coda Style Popup Bubbles - Unsurprisingly, Coda has used some beautiful tooltips over the years. With this demonstration, jQuery for Designers aims to show us just how they created their pop up bubble tooltips. CSS is used extensively to style the bubbles while simple mouseover and mouseout controls produce the popup effect.
Flickr-style Photo Tagging - If you're looking for a customizable way to provide Flickr-like photo annotations for your site, Ben Nadel provides an interesting solution. A recent update resolves some early browser compatibility issues, but the plugin is still in development. We expect more great things as it matures.
imgPreview - Image previews appear as tooltips when a user hovers on a link. A graceful script, it doesn't require any non-semantic classes to achieve its functionality. In addition to customization with CSS and loading types, the latest version allows image previews in links to other sites/pages and even non-anchor elements.
Pluralink - If you'd like to add multiple links to a word, phrase or image, this is the way to go. Text links automatically display a number to show how many items will be viewed in the tooltip; this functionality has been turned off on images to avoid breaking up the design. Set up correctly, the javascript will degrade, though not as gracefully as we'd like to see. The script can also be set up to re-initialize for AJAX implementations.
Taggify - Add complex popups to your images with this web service. Start out by customizing the image fading, frame for the active area and tooltip background and then generate the html to be placed in your site. Taggify's blog covers advanced usage like sharing tags between pages and advanced tooltip layout.
TipTip - When Drew Wilson couldn't find a tooltip that worked for him, he did what any good developer does - made his own. His goal was to create a custom tooltip that would behave exactly like a browser tooltip and we think he pulled it off. TipTip detects the browser window and places itself automatically to whichever side of the element that will allow it to stay within the window. With no images and CSS for design control, TipTip ends up being a lightweight and polished solution
Trackback URL for this post:




![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=5919ffca-71df-4527-8f2d-7499fd1b06c7)


Comments
Post new comment