Implement CoolTips in Ajax Based Application

Guiding users in the application is important for developers since this will allow users to easily navigate the application. Developers often provide tips on the side of the application or tips that provides a pop-up instruction on what should be done on the specific area in the application.

But there are moments wherein the tips will cause more harm than good in the application. The tips that pop-up in the application will require additional resources which will slow down the application. Instead of helping the users interact with the application, the process slows down which will only discourage users from coming back.

Providing a tip tool without sacrificing quality can be made possible with a library called CoolTips. A JavaScript based library, CoolTips was created to allow developers implement unobtrusive tips in the online application. The library is object oriented (OO) which means it should work in the client side without any challenges. With this library, the application will be able to provide tips that can be displayed by hovering the needed data for users.

Standardization Through Additional Library

A good feature for CoolTips is that it doesn't push the library with an independent coding. To ensure compatibility with various browsers and operating systems, the library uses not one but two well known frameworks. Aside from invoking the script from CoolTips, developers also has to launch scripts that will allow the code to work with Prototype and Script.aculo.us. It's practically a mash-up with a few configurations from CoolTips that will allow impressive customization on the tips. The library will limit developers to basic hover interface but it should be more than enough to aid developers create interesting tips.

Implementing CoolTips

As already indicated, developers will be required to launch Script.aculo.us and Prototype. This means developers have to use the following code:

After properly implementing the said functions, developers should follow up the library with CSS created by the CoolTips library. The filename is tooltips.css and this should allow easy streaming of information to the users.

Through CSS, developers can also take advantage of the Object Oriented technique to easily implement the needed functions. Instead of writing the entire code within the application, developers can write the code in separately and call on the as element.

Options in Implementation

The following are options for developers on customization:

• backgroundColor
• borderColor
• textColor
• textShadowColor
• maxWidth
• delay
• mouseFollow
• opacity
• appearDuration
• hideDuration (for fade out effects)

Power of Mash-up

The creation of CoolTips library is a good example on a powerful tool that can be created through mash-ups. Combining the power of Prototype of Script.aculo.us allows developers to fully explore on what Ajax can do for the application.

The developers were also able to implement an object oriented tool which means users will be able to access the website and use the added tools without interference. This tool is definitely a must for those who wanted to add something helpful in their online application.