Open Source Resources for Web Application Developers

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

• 4 Comments

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

• 3 Comments

Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework. If you also use Scriptaculous you can even add some nice effects to them as well. You can easily create fixed or offset tooltips with blinding or fade in/out effect. You can also define Hooking for the tooltips which allows you to place your tooltips anywhere in relation to your target elements. The concept is simple, you define two corners that you want to ‘hook’ to eachother. One on the target element, the other one on the tooltip. It is licensed under Creative Commons, feel free to use it on your projects.

Requirements: Prototype Framework
Demo: http://www.nickstakenburg.com/projects/prototip/
License: Creative Commons License

• 7 Comments

BoxOver uses javascript / DHTML to show tooltips on a website. Implementation of the tooltips, however, requires no knowledge of DHTML or javascript. There are many tweaks which can be set to customise it to your needs by setting through a tag’s “title” attribute. Some of them are very useful.

• Specifies the header and body text of the tooltip
• Specifies CSS class for styles to be used on tooltip header and body.
• Make tooltip stick to side of the window if user moves close to the side of the screen.
• Specifies whether to halt the tooltip when the user double clicks on the HTML element with the tooltip.
• Specifies whether to hide all SELECT boxes on page when popup is activated.
• Specifies whether to fade tooltip into visibility and how fast to fade in tooltip.
• Specifies delay in milliseconds before tooltip displays.

Requirements: Internet Explorer 5+, Mozilla 1.4+, FireFox 0.9.3+, Opera 7+
Demo: http://boxover.swazz.org/example.html
License: GNU License

• 2 Comments