Introduction

The tooltip component is used on every known electronic platform from mobiles to computers. The tooltip is essentially a small note describing the currently selected object on screen. We can observe the tooltip in action, on our very phone's desktop. Choose the send message or any of the quick -links available on our desktop. Once you have the selection rectangle on top of one of the buttons, a short description of that button is visible. This is the Tooltip. Hence, tooltips enhance readability and the user experience. They are of two types:

• Fixed tooltips : Tooltip text appears at the same place irrespective of the selected item. Preferable for applications.
• Location based tooltips : tooltip text appears close or over the selected item.

Shows an Location based tooltip employed on the mobile's homescreen

Requisites

This component was designed in Flash 8 IDE and exported to Flash Lite 2.0 player. It was tested on the Nokia 5200 device.

How to use

To incorporate the tooltip functionality on your programs, you can use the AS file that can be downloaded from below. The tooltips that are demonstrated here are the Fixed Tooltips. To add tooltips to your buttons, just follow the code below

var tp:Tooltip = new Tooltip(0x33ccff, 0x003366, 1, 10);
//var tp:Tooltip = new Tooltip(); basic constructor
// basic constructor loads a GRAY background with BLACK textcolor,xPos =12 and yPos =10.
tp.additem("This is a sample tooltip", b1);
tp.additem("Button2 Tooltip", b2);
//Here, b1 and b2 are buttons that are on the screen.

Initialize a Tooltip instance via code as in the first line. Constructor params:

• bgColor : Background color of the tooltip text (type Number)
• textColor : Textcolor of the tooltip text (type Number)
• xPos : X coordinate of the location of the tooltip
• yPos : y coordinate of the location of the tooltip

Class methods

additem("tooltip string",button_id)

This is the only public function exposed by the Tooltip class. The programmer must parameterize the tooltip string (arg 1) and the associated button identifier ( arg 2). Only one tooltip text can be assigned to a button.

Download

Download the AS file and an associated FLA from here.Media:Tooltip.zip

References

Tooltip usability

Author

--manikantan 19:23, 30 June 2009 (EEST)