Demandbase Connect

DotConcepts offers everything you will need to create your web site including quality web design, custom web development and unique graphic design.

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

Reblog this post [with Zemanta]

Comments

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

Subscribe to our RSS Feed Subscribe to our Twitter Feed

We are proud that our web design and development efforts have been able to help businesses grow in the Akron area and beyond.
Talk to one of our Project Managers today and let us make your Dot Concepts a Dot Reality.