Open Source Resources for Web Application Developers

CSS tooltips are very popular in modern web design and contrary to popular belief it is really easy to create them, especially with one of the all so popular javascript frameworks. In that case, you have to use at least a plugin. However, Kriesi.at has shared us an article of “Create simple tooltips with CSS and jQuery” which teaches us how to get some basic tooltips with only about 10 lines of CSS and jQuery Code.

Requirements: jQuery framework
Demo: http://www.kriesi.at/wp-content/extra_data/tooltip_tutorial/step1.html
License: License Free

Magic Toolbox has created 2 amazing javascript image zoom tools ( Magic Zoom and Magic Magnify ). Magic Zoom is a JavaScript zoom tool. It’s the best way to display images in incredible detail. Users do not need to click anything – they just move their mouse over the image to see every detail of your product. Magic Magnify is a Flash image zoomer which is similar to Magic Zoom, however it looks more elegant, it zooms into your images with a magnifying-glass.

A free license of Magic Zoom is downloadable and is available for non-commercial website. It comes with the JavaScript and CSS code plus sample HTML and an image.

Requirements: Javascript Enabled / Flash Required
Demo: http://www.magictoolbox.com/
License: Free for Non-Commercials

We have published a post about Prototip a while ago. It was a lovely script that allows us to create simple and complex tooltips easily. Now Prototip 2 has just released with a lot of new features and it looks truly stunning. It is easy to customize. You have complete control over tooltip positions. You can also have rounded corners, speech bubble effect, special close button and custom style for the tooltip easily.

However, Prototip 2 is not free… A small fee is required for non-commercial use. The script can be used on a Single Domain for $3 and unlimited use for $15. I know it is sad that Prototip 2 is not free for us, however you can get this amazing script for as low as $3 is really worthwhile.

Requirements: Prototype Framework
Demo: http://www.nickstakenburg.com/projects/prototip2/
License: $3 – $295

Easiest Tooltip and Image Preview is one of those tooltip-like bubble popups that appears when you roll over link or a thumbnail. What this script does is adds an element to the body when you roll over a certain object. That element’s appearance is predefined with css (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When cursor is moved over he object, element moves with it and when cursor roll out, the element is deleted. Easiest Tooltip and Image Preview is powered by jQuery.

Requirements: -
Demo: http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview…
License: License Free

Coda is one of the new web development tools for the Mac – and it’s popular amongst designers and developers. Panic (the developers of Coda) are also known for their sharp design. Now, we can have a fancy popup bubble tooltips with jQuery. Remy Sharp from jQueryforDesigners has showed us how to re-create their ‘puff’ popup bubble shown when you mouse over the download image. In essence the effect is just a simple combination of effect.

This effect could be perfected by changing the initial reset (popup.css()) code to read from the trigger element and approximate it’s position. In the example, jQueryforDesigners has hardcoded it because he only has one on the page – but you may want to use this effect several times across your page.

Requirements: jQuery Framework
Demo: http://jqueryfordesigners.com/demo/coda-bubble.html
License: License Free

Taggify is a web widget which allows bloggers and publishers enhance their sites by adding visual tags to any site’s images. Visual tag is a clickable image region tagged with some title, description and link. When visitor moves mouse over such region Taggify shows popup tooltip with interesting content provided by the publisher.

Requirements: -
Demo: http://www.taggify.net/
License: License Free

Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page. They operate this way:

1. A check for DOM support is performed
2. If found, the title and href attributes of links are extracted from the page and they’re injected into a DOM structure
3. When the mouse is rolled over a link, the related tooltip (styled with CSS) is displayed

Bubble Tooltips are unobtrosive and for browsers with bad DOM support or javascript disabled, the plain title of links will be displayed. Compatibility is quite good: they’ve been tested with success in IE5, IE5.5 and IE6 on Win, Opera 8.5, Safari 2.0 and Firefox 1.5.

Requirements: Internet Explorer 5.0+, Opera 8.5+, Safari 2.0+, Firefox 1.5+
Demo: http://web-graphics.com/mtarchive/BubbleTooltips.html
License: License Free

CoolTips is a lightweight unobtrusive JavaScript web-browser tooltips replacement technique. CoolTips is used to replace conventional web-browser tooltips which has been tested on Windows and Mac. Firefox, Opera, Safari, Internet Explorer 6, 7. The tooltips get contents of title attribute, so it’s fully unobtrusive. CoolTips is an Object-Oriented class based on Prototype JS and Script.aculo.us frameworks. You can customize the look of different CoolTips instances using bunch of parameters or CSS easily.

Requirements: Prototype JS and Script.aculo.us Frameworks
Demo: http://www.wildbit.com/labs/cooltips/
License: MIT License

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 . No. It’s none of those. Instead he had two goals for this script.

1. Make the code cleaner and much more condense – with in fact – less code
2. Improve the tooltip effect

Cool notable feature that Sweet Titles (as well as Nice Titles) has is that the JavaScript is unobtrusive which of course as we all know, in and of itself, improves accessibility. Another thing I like about Sweet Titles is the appearance of the tooltips, it looks very nice.

Requirements: Modern Browsers with Javascript Enabled
Demo: http://www.dustindiaz.com/sweet-titles/
License: Creative Commons License