Simple AS3 ToolTip
Tagged as: ActionScript, FlashI 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
- 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
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.
:)