Feature: Tooltip

To make my interface buttons more compact I want to be able to just use symbols that represent their function and not have the written words. This is fairly simple, but this leaves a problem where you cannot be certain that everyone viewing this interactive flash advertisement will know what the symbols mean, even if they are very user friendly. To get around this I am going to create tooltips, which feature in many programs to help the user.

Wikipedia says:

The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small "hover box" appears with supplementary information regarding the item being hovered over.

Source: http://en.wikipedia.org/wiki/Tooltip

This is going to require some actionscripting, so I have looked around the internet for various techniques and tutorials and come up with a solution. Using an external actionscript file to create a 'tooltip class, I can simply assign the class to a .onRollOver = function().

Here is the code applied to the button in a frame:

audio_on.onRollOver = function() {
tt.showTip("Sound On");
}
audio_on.onRollOut = function() {
tt.removeTip();

Not being skilled enough to have written this myself, I did use a tutorial and after some trial and error I began to learn what each of the variables in the external actionscript file did so I was able to change things like the size of the text, size of the box, and removed the small point at the bottom that made it look more like a speech bubble. In the end I have something that is clean and informative, which is perfect for what it is supposed to do.

Example:







This shows a tooltip when he mouse hovers over the mute button.