Here is the way I made Tooltip for my flash projects.
It's class attached to library symbol, in order to change skin you have to just modify movieclip in library. Background contains guides for 9 slice scaling.
It changes also direction automatically based on stage width and height if its near borders.
Here is the example of using it:
ToolTip.as
Actionscript:
-
package com.abrahamyan.liquid
-
{
-
import flash.display.MovieClip;
-
import flash.events.Event;
-
import flash.events.TimerEvent;
-
import flash.text.TextFieldAutoSize;
-
import flash.text.TextField;
-
import flash.utils.Timer;
-
import gs.TweenLite;
-
import gs.OverwriteManager;
-
import gs.easing.*;
-
/**
-
* ...
-
* @author Armen Abrahamyan | http://abrahamyan.com | armflash (at) gmail.com
-
*/
-
public class ToolTip extends MovieClip
-
{
-
public var _multiLine:Boolean = false;
-
public var labelMargin:Number = 10;
-
public var arrowMargin:Number = 10;
-
public var showDelay:Number = .5;
-
public var hideDelay:Number = .5;
-
//
-
private static var instance:ToolTip;
-
private static var allowInstance:Boolean;
-
private var _label:String;
-
private var _fixedWidth:Number = 50;
-
private static const DIRECTION_LEFT:String = "directionleft";
-
private static const DIRECTION_RIGHT:String = "directionright";
-
private static const DIRECTION_TOP:String = "directiontop";
-
private static const DIRECTION_BOTTOM:String = "directionbottom";
-
private var _horDirection:String;
-
private var _verticalDirection:String;
-
private var _followMouse:Boolean;
-
private var _timer:Timer;
-
private var _xposition:Number;
-
private var _yposition:Number;
-
private var _stageWidth:Number;
-
private var _stageHeight:Number;
-
private var _labelColor:Number;
-
-
/**
-
*
-
*/
-
public function Tooltip()
-
{
-
if (!allowInstance)
-
{
-
throw new Error("use ToolTip.getInstance() instead of new keyword !");
-
}
-
-
}
-
/**
-
*
-
* @return
-
*/
-
public static function getInstance():ToolTip
-
{
-
if (instance == null)
-
{
-
allowInstance = true;
-
instance = new ToolTip();
-
allowInstance = false;
-
}else
-
{
-
trace("ToolTip instance already exist !");
-
}
-
instance.init();
-
return instance;
-
}
-
/**
-
* sets label multiline /singleline
-
*/
-
public function set multiLine(pEnabled:Boolean):void
-
{
-
_multiLine = pEnabled;
-
if (_multiLine)
-
{
-
label_txt.multiline = true;
-
label_txt.wordWrap = true;
-
label_txt.width = _fixedWidth;
-
label_txt.autoSize = TextFieldAutoSize.RIGHT;
-
-
}else
-
{
-
label_txt.multiline = false;
-
label_txt.wordWrap = false;
-
label_txt.autoSize = TextFieldAutoSize.LEFT;
-
}
-
-
}
-
/**
-
* sets fixed width for the multiline tooltips
-
*
-
*/
-
public function set fixedWidth(pWidth:Number):void
-
{
-
_fixedWidth = Math.max(pWidth, 50);
-
}
-
/**
-
* sets new label color
-
*/
-
public function set labelColor(pColor:Number):void
-
{
-
_labelColor = pColor;
-
label_txt.textColor = _labelColor;
-
}
-
-
/**
-
* returns label color
-
*/
-
public function get labelColor():Number
-
{
-
return _labelColor;
-
}
-
/**
-
*
-
*/
-
private function init():void
-
{
-
alpha = 0;
-
visible = false;
-
cacheAsBitmap = true;
-
this.mouseChildren = false;
-
this.mouseEnabled = false;
-
label_txt.x = labelMargin;
-
label_txt.autoSize = TextFieldAutoSize.LEFT;
-
-
_horDirection = DIRECTION_RIGHT;
-
_verticalDirection = DIRECTION_TOP;
-
addEventListener(Event.ADDED_TO_STAGE, onAdded, false, 0, true);
-
reSize();
-
}
-
private function onAdded(e:Event):void
-
{
-
removeEventListener(Event.ADDED_TO_STAGE, onAdded);
-
onStageResize();
-
stage.addEventListener(Event.RESIZE, onStageResize, false, 0, true);
-
-
}
-
private function onStageResize(e:Event=null):void
-
{
-
_stageWidth = stage.stageWidth;
-
_stageHeight = stage.stageHeight;
-
-
}
-
-
-
private function reSize():void
-
{
-
bg_mc.rect_mc.width = label_txt.textWidth + 2 * labelMargin +6;
-
bg_mc.rect_mc.height = label_txt.textHeight +16;
-
bg_mc.arrow_mc.scaleX = (_horDirection == DIRECTION_RIGHT)?1: -1;
-
bg_mc.arrow_mc.scaleY = (_verticalDirection == DIRECTION_TOP)?1: -1;
-
bg_mc.arrow_mc.x = (_horDirection == DIRECTION_RIGHT)?arrowMargin:(bg_mc.rect_mc.width-arrowMargin);
-
bg_mc.arrow_mc.y = (_verticalDirection == DIRECTION_TOP)? bg_mc.rect_mc.height:0;
-
}
-
/**
-
* shows tooltip
-
* @param pLabel label of tooltip
-
* @param pXpos if followMouse property is set to true, this property is X offset from mouse position, else postion of x coord. of tooltip
-
* @param pYpos if followMouse property is set to true, this property is Y offset from mouse position, else postion of y coord. of tooltip
-
*/
-
public function show(pLabel:String="", pXpos:Number=0,pYpos:Number=0):void
-
{
-
this.alpha = 0;
-
this.visible = false;
-
_label = pLabel;
-
label_txt.text = _label;
-
_xposition = pXpos;
-
_yposition = pYpos;
-
// check for timer, just in case...
-
if (_timer)
-
{
-
_timer.stop();
-
_timer.removeEventListener(TimerEvent.TIMER, onTimer);
-
_timer = null;
-
}
-
updatePosition();
-
-
TweenLite.killTweensOf(this);
-
TweenLite.to(this, showDelay, { autoAlpha:1, ease:Linear.easeNone } );
-
-
if (_followMouse)
-
{
-
_timer = new Timer(20);
-
_timer.addEventListener(TimerEvent.TIMER, onTimer, false, 0, true);
-
_timer.start();
-
}
-
}
-
private function updatePosition():void
-
{
-
var xpos:Number = _followMouse?(stage.mouseX + _xposition):_xposition;
-
var ypos:Number = _followMouse?(stage.mouseY + _yposition):_yposition;
-
_horDirection = (xpos + bg_mc.rect_mc.width - arrowMargin> _stageWidth)?DIRECTION_LEFT:DIRECTION_RIGHT
-
_verticalDirection = (ypos -bg_mc.rect_mc.height - bg_mc.arrow_mc.height <0)?DIRECTION_BOTTOM:DIRECTION_TOP;
-
reSize();
-
this.x = Math.round((_horDirection == DIRECTION_LEFT)?(xpos-bg_mc.rect_mc.width+arrowMargin):(xpos-bg_mc.arrow_mc.x));
-
this.y = Math.round((_verticalDirection == DIRECTION_TOP)?(ypos - bg_mc.rect_mc.height - bg_mc.arrow_mc.height):(ypos + bg_mc.arrow_mc.height));
-
}
-
/**
-
* hides tooltip
-
*/
-
public function hide():void
-
{
-
if (_timer)
-
{
-
_timer.stop();
-
_timer.removeEventListener(TimerEvent.TIMER, onTimer);
-
_timer = null;
-
}
-
TweenLite.killTweensOf(this);
-
TweenLite.to(this, hideDelay, {autoAlpha:0,ease:Linear.easeNone } );
-
}
-
private function onTimer(e:TimerEvent):void
-
{
-
e.updateAfterEvent();
-
updatePosition();
-
}
-
/**
-
* if true, tooltip will foloow mouse
-
*/
-
public function set followMouse(pFollow:Boolean):void
-
{
-
_followMouse = pFollow;
-
}
-
/**
-
* returns boolean value if tooltips follows mouse or not
-
*/
-
public function get followMouse():Boolean
-
{
-
return _followMouse;
-
}
-
/**
-
* use destroy() method before removing tooltip from stage
-
* cleans/removes listheners/timers
-
*/
-
public function destroy():void
-
{
-
TweenLite.killTweensOf(this);
-
stage.removeEventListener(Event.RESIZE, onStageResize);
-
if (_timer)
-
{
-
_timer.stop();
-
_timer.removeEventListener(TimerEvent.TIMER, onTimer);
-
_timer = null;
-
}
-
}
-
}
-
-
}
Nice, I download, maybe i will use it. Thanks.
just one thing when you mouseover on the tip with the red label and go to the others it keeps the red color, it only changes color when you go to the one with the grey color
@Hugo: That’s because I didn’t change label color to back on all buttons, the same happens with arrow distance. If you download source files u will see that all u need to do is use: tooltip.labelColor = 0×666666 to restore color back.
“unexpected file format” while opening .fla in flash CS3
@kanu I use CS4 for fla, will include cs3 file as well as soon as I get home
thx
When I create a file using the tooltip code it works fine. But when I then load this into my main app via urlrequest, i’m getting a #1009: Cannot access a property or method of a null object reference. Any idea on this?
@Jack There should be no problem when you load. I have just make quick test loading tooltip inside another swf, works fine for me.
here is is the simple code for load example inside another swf.
//————————————————
stop();
var loader:Loader = new Loader();
loader.load(new URLRequest(”tooltip.swf”));
addChild(loader);
//————————————————
I would suggest you to init/add tooltip in you holder swf file, than use it from anywhere.
Hi, a great work for tooltip.
I am wondering whether I can use it on Flash CS4 ActionScript3 since I kept getting the error message: WARNING: The component ‘Button’ requires ActionScript 2.0.
Thank you.
@vir: zip files contains both cs3 and cs4 .fla files, you need tooltip.fla for cs4, the warning could be related only with the button component in stage to show functionality, u can simply remove that button and use ur own.
AWESOME!
I’m trying to place the tooltip and am having a hard time.
I won’t stop until I figure it out but I’m hoping you resond so I can prevent some frustration…lol
Thanks very much
Great Tutorial…It’s very useful…
Thanx a lot…
I have no idea where to start.
I am a UI developer and typically work with client-side js. Your multi-line tooltip looks like it fits with what I want.
I am trying to modify an existing flash movie (CS3 with AS3). It dynamically loads movieclip extension “modules” based on a json dataloader which gives the id and the coordinates. I would like to add a tooltip to each of these components where the content is pulled via ajax request and not pre-loaded.
Any help would be greatly appreciated.
@FlashNoob Well, you can see from the example source file how u can show and hide multiLine tooltip.
As I understand you have to create functions in main timeline that show and hides tooltip. show function should have parameters of label,x,y position which can be related based on ur ui controls as well, the same way im showing tooltip in example, based on control locations.
Once you have that functions in main timeline you can call them from javascript.
Your script was very useful and I appreciate your efforts. Thanks!
@roy welcome.
Thanks so much. I am now handling showing and hiding the tooltip. Initially the tooltip text will be some attribute of the component that is triggering the tooltip. I would then like to make an ajax request to get additional data and when the response is received, replace the text or append to the text the response. Can you point me to a reference that can help me with this portion?
works great in tileList component, thank you!
A really nice work. My question is how I can make your tooltip display Arabic? Thanks.
@Anwar if you open .FLA file, in library you can find Tooltip Symbol, when u open it: the textfield is in top layer(label_txt).
Set your custom font there and embed characters.
When I put the AS3 on my fla the site stops. I have already removed the stop cmd in the AS3. Any idea why it would be stopping?
@Brad tooltip can’t stop ur main timeline, stop action is related to the class itself not to the main timeline, i guess u have problems with the class path in library.
Make sure to keep the folder structure and check the tooltip symbol class path in library.
also make sure to include src folder to the fla files main class path.
hope that helps
it was actually much simpler. I can’t place the AS before I have the button on the screen and the instance name in place.
I place the AS3 in the first frame and didn’t have the buttons showing up in the 15th frame. So for some reason it stops.
if I move the AS3 to frame 15 where all my buttons show up with an instance name it all works GREAT.
not really sure why, but it worked.
One last question as I got everything else working. I put most of the AS3 on the first frame and then added the actual
quote_btn.addEventListener(MouseEvent.MOUSE_OVER,onOver,false,0,true);
quote_btn.addEventListener(MouseEvent.MOUSE_DOWN,
quotes_btnMain_P_Handler);function
quotes_btnMain_P_Handler(event:MouseEvent):void {
gotoAndPlay(1, “Quotes”);
}
quote_btn.addEventListener(MouseEvent.MOUSE_OUT,onOut,false,0,true);
on my as layer (at the top) on the same frame where the button shows up in the timeline.
Everything works, but the tooltip shows up behind the buttons.
Thoughts??
Thanks so much for all the help. This is the last thing until its all done.
@Brad u should add tooltip after ur controls, so it will come top on display list, Im about addChild method.
Again you are correct. Problem fixed. It is now on top. The only problem I can think of is what if I have some controls then a stop cmd I would have to load the tooltip at that time so it would function, then I have more controls later in the movie and another stop.
What would I do in this case?? Since I can not load the tooltip after all the controls due to the stop in the timeline?
@Brad Tooltip is displayobject, just change the depth any time u want,
if u are adding later another display object u can use swapChildren to swap depths and bring tooltip to front. Or u can use addChildAt(numChildren-2) method to add ur new controls one level down.
to avoid this situation u could use different holders for controls and for tooltip from start by putting tooltip holder on top. But u have to think that coordinate system is changing here and use relative positioning based on holders in mind :):)
ummm did I mention I am new to this LOL I have no idea what you said and when i add the tooltip code more than once I get more errors.
1151: A conflict exists with definition tooltip in namespace internal.
1021: Duplicate function definition.
Warning: 3596: Duplicate variable definition.
I don’t know how to recall some of this again across scenes … I guess i’m in over my head.
ignore the other errors I got it working across scenes.
I’m brand new at Flash programming and I find this tooltip to be really cool.
But when I try to use the tooltip in my project I get errors regarding the label_txt and bg_mc objects. Where are these object declared? When I run the code provided it works fine. What am I not seeing?
Thanks
@Alex make sure u move library items from example to your FLA file’s library
Wow. Thank you very much.
Where can I get the example of tooltip, I have searched buy no luck.
Thank you very much.
@jsaagerbier download source files link is located under ToolTip.as block source file.
http://abrahamyan.com/wp-content/uploads/2009/tooltip/tooltip.zip
This a wonderful tooltip. I have it working fine when I use it like your example .fla file. (In that example, the timeline contains all of the event listeners, etc.)
I have troubles when I implement this from a class, though.
I have a class that handles all of my event listeners for my roll over areas that use your tooltip. I have this on frame 1 of the timeline:
stop();
var tooltip:ToolTip=ToolTip.getInstance();
addChild(tooltip)
stage.scaleMode= StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
But when I try to call the tooltip methods from one of my class’s methods I get ‘Access of undefined property tooltip.’
The function that calls the tooltip looks like this:
function mouseOverListener(evt:MouseEvent):void {
tooltip.followMouse=true;
tooltip.fixedWidth=150;
tooltip.multiLine=true;
tooltip.show(”Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales placerat ligula. Proin elementum, ante vel consectetur pharetra”); ;
}//end mouseOverListener
Please help. Its the best tooltip out there and I want to get it to work from my class.
Thanks!
@JAJ
thx for the kind words.
from what u wrote:
u have: var tooltip:ToolTip=ToolTip.getInstance(); -in main timeline, but u don’t have it inside ur castom class.
try to add tooltip as private var inisde ur custom class:
private var tooltip:ToolTip=ToolTip.getInstance();
as its singleton, it will refer to the same class instance as u have in root, should work.
Awesome. Works well. Thanks!
When you say ‘root’ you mean the timeline?
(I am very new to Flash and AS3.)
@JAJ , y, I mean the main timeline(old school), glad that it get fixed.
hello Armen,
Thanks for sharing your code, time, and efforts. I’ve been searching for a nice tooltip but without avail. Yours finally came along and saved my hair pulling!
Your tutorial and code are easy and results sleek looking. Keep up the great work!
@Andy Thx, glad that it worked for u.
hello Armin,
Your tooltip works perfect and displays nicely. My only question: is there a way to make the font display different colors or sizes? I tried to add “private var label_txt:Boolean = true;” and “label_txt.htmlText = true;” but it keeps throwing errors.
I also changed the properties of label_txt to render html in the Properties tab.
Any suggestions?
Thanks in advance!