Simple AS3 ToolTip
Tagged as: ActionScript, Flash* Edit: 11.04.09 *
-Added : buffer setting for fields within ToolTip
-Added: bgAlpha setting for ToolTip background
* end edit *
* Edit: 08.27.09 *
-Added the ability to use a StyleSheet.
-Modified the way I was checking for font embedding for the textfields in the ToolTip. Embeds must be set if you plan to use embedded fonts, you must specify a font in your StyleSheet or TextFormat if setting either "titleEmbed" or "contentEmbed" to true, there is a working example in the source. Example:
var tt:ToolTip = new ToolTip();
tt.titleEmbed = true;
* end edit *
I recently had the need to create a fairly stylish, somewhat configurable tooltip for an AS3 project, so I figured I'd share as I couldn't find many freebees out there. I also needed the ability to provide both a title and a short description with different formats. This one is pretty straight forward and has a few settable properties. Here's a rundown of what's available:
- tipWidth : Number : Set the width of the tooltip
- tipHeight : Number : Set the height of the tooltip
- titleFormat : TextFormat : Format for the title of the tooltip
- contentFormat : TextFormat : Format for the bodycopy of the tooltip
- stylesheet : StyleSheet : StyleSheet Object ( Added 08.27.09 )
- titleEmbed : Boolean : Tell the tooltip to use embedded fonts for the title
- contentEmbed : Boolean : Tell the tooltip to use embedded fonts for the content
- align : String : left, right, center
- delay : Number : Time in milliseconds to delay the display of the tooltip
- hook : Boolean : Displays a hook on the bottom of the tooltip
- hookSize : Number : Size of the hook
- cornerRadius : Number : Corner radius of the tooltip, same for all 4 sides
- colors : Array : Array of 2 color values ( [0xXXXXXX, 0xXXXXXX] );
- autoSize : Boolean : Will autosize the fields and size of the tip with no wrapping or multi-line capabilities, helpful with 1 word items like "Play" or "Pause"
- border : Number : Color Value: 0xFFFFFF
- borderSize : Number : Size Of Border
- buffer: Number : TextField buffer inside ToolTip
- bgAlpha : Number : Transparency setting for ToolTip background
A simple example would look something like:
var tf:TextFormat = new TextFormat(); tf.bold = true; tf.size = 12; tf.color = 0xff0000; var tt:ToolTip = new ToolTip(); tt.hook = true; tt.hookSize = 20; tt.cornerRadius = 20; tt.align = "center"; tt.titleFormat = tf; tt.show( DisplayObject, "Title Of This ToolTip", "Some Copy below the Title" );
A working example:
Things of note, I am using an EnterFrame for following the mouse, maybe I should switch to a Timer? I really never use frame rates below 30, so for me, this isn't much of a factor. I'm handling the MouseOut within the ToolTip, seemed easier that way.
Anyway, without further ado, here are the ToolTip source files used above.
If you run into bugs or have any issues please let me know.
:)