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!
@Andy For the color u can use labelColor property, its included in example source file(tooltip.labelColor = 0×666666).
for the html text :
1. in the library edit symbol, set html enabled on textField
2. inside ToolTip.as change “label_txt.text = _label;” to “label_txt.htmlText = _label;”
Should work.
hello Armen,
It worked! You’re a genius! Thanks for quick reply; it saved me countless hours of trying to figure it out on my own (although I did try unsuccessfully for a few nights).
Again, thanks for sharing your great work.
- Andy
is there any way to make “cursor move on top of the tooltip so that we can click links inside it”
Any suggestions?
Thanks in advance!
Hello Armen
Is there any way to make “cursor move on top of the tooltip so that we can click links inside it”
like in below site
http://www.barnesandnoble.com/index.asp
Any suggestions?
Thanks in advance!
@ASHOK if u set tooltip.followMouse=false; and use tooltip.show(”label”); it will stay onscreen until u use tooltip.hide()
u can use optional 2,3 parameters in show function to show tooltip in exact position, look at example fla.
tooltip.show(”TOOLTIP IS IN FIXED POSITION !”,btn2.x,btn2.y);
Armen,
Thanks for the quick reply.
I tried above said solution and it worked for single image but I have set of images scrolling horizontal.
I am having set of images which are in horizontal and when i take the cursor on each image a tooltip appears which will overlap on beside image also.Since text in it is long and i have links in that tooltip.
So i want help in such a way that when we take cursor on tooltip and if it overlaps on other image also that tootip should pertain and links in that tooltip can be clicked.
I am also uploading my source files for your reference.
http://rapidshare.com/files/319354817/gallery_tootip.rar.html
I am trying to achieve as in below site scroll gallery
http://www.barnesandnoble.com/index.asp
Thanks in advance!
ASHOK
@ASHOK sry don’t have time to look at source files.
I think if u change inside init() method:
this.mouseChildren = true;
this.mouseEnabled = true;
u will come to close to what u want.
Hello Armen, I’m French and I want to use your source but I have a problem with the french letters : éàö … What is the function where the words are modified when I write Chasse sur Rhône (it’s a city in France) the label show only : Chasse sur Rhne, not the “ö” it’s the same result for éèà. Have you got an idea ? Thank’s for your job. Franck
@Franck you have to select textfield inside library and embed all chars for the font. Try to change the font if it doesn’t help( to Arial for example).
Thank you Mr abrahamyan. It works flawlessly. Even better than commercial ones I’ve seen so Far.
Thanks Again
-reed
@reed You are very welcome.
I am come from China.I find your blog in Google.Then I try the ToolTips Class in my project,then I found a problem.when I use Like this: toolTip.show(”你好”); I can see nothing on screen,but not english.so I trace the label_txt.text.I can see “你好”.What’s the problem?
@Jerry problem is in font, you have to select textfield inside library, change the font to the one that supports Chinese and embed all chars for the font. Try to change the font to Arial for example.
Very nice !!!
But just problem when i try use ‘à’ in the tooltip.show.
It’s ok with ‘é’ ans ‘è’ but not with ‘à’ …this character is not displayed
@cyril thx, read prev comment regarding embeding fonts and special characters.
This tooltip doesn’t seem to work with movieclip buttons. Am I missing something?
Actually, correction. It works perfectly fine with movieclip buttons generally. However, I have a movieclip button with a 45% transparent layer inside of it, and that seems to make it not work for some reason.
@Amir problem is in ur movieclip/button, doesn’t have any relationship with tooltip
Hello, how do you get the auto direction to work? I can’t figure it out?
ahhh ok, i see it only changes direction near the stage borders. I thought it changed based on where the mouse was on the button.
@thien it should work automatically based on stageWidth and stageHeight.
U might need to set:
stage.scaleMode= StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
take a look at example fla file, try to change the stage size and run it again.
Armen, what if I wanted to use several differently designed tool tips in my poject? For example, in addition to the tooltip you created in the example, I also wanted to use a tooltip I designed. Right now it seems I can only use one tooltip design. Is this correct?
@thien right now its working with one design/skin.
you can edit symbols in library, give them different look, but still will be one type.
well, in general in most cases from my experience in one project tooltips are same style.
From the other hand adding skin change functionality is not hard, all you have to do is write a public method to change rect and arrow(remove the existing and add new).
Tooltip design I use is simple-> rounded rectangle, arrow, textfield. Once the new design keeps that structure will be no problem to update it/change it runtime.
that should cover with the new method-> changeSkin(rect, arrow)
I will try to find a time to add that functionality in a week.
thx
hi, I just wanted to add a contribution that may help whenever you want the tooltip to be added as a child only when a ui component is instantiated and the stage is not the “root stage” but the ui component stage…
private function updatePosition():void
{
var xpos:Number = _followMouse?(stage.mouseX + _xposition):_xposition;
var ypos:Number = _followMouse?(stage.mouseY + _yposition):_yposition;
var point:Point;
if(this.parent)
{
point = this.parent.globalToLocal(new Point(xpos, ypos));
}
else
{
point = (new Point(xpos, ypos);
}
_horDirection = (point.x + bg_mc.rect_mc.width - arrowMargin > _stageWidth)?DIRECTION_LEFT:DIRECTION_RIGHT
_verticalDirection = (point.y -bg_mc.rect_mc.height - bg_mc.arrow_mc.height < 0)?DIRECTION_BOTTOM:DIRECTION_TOP;
reSize();
this.x = Math.round((_horDirection == DIRECTION_LEFT)?(point.x-bg_mc.rect_mc.width+arrowMargin):(point.x-bg_mc.arrow_mc.x));
this.y = Math.round((_verticalDirection == DIRECTION_TOP)?(point.y - bg_mc.rect_mc.height - bg_mc.arrow_mc.height):(point.y + bg_mc.arrow_mc.height));
}
Thanks for the tutorial, very useful!!
I’m just having a little trouble with something, I’ve added the tooltips to a website I’m designing and it’s all working fine.The page loads with a page transition and then the content loads..but when the content loads (which has a map with the tooltips) my swf moves from the centre stage to top left. I tried changing the
addChild(tooltip)
stage.scaleMode= StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT
;
and also had a look in the as files, but no luck. Would you be able to point me in the right direction.
Thanks again!
@Anneka pls read the comments.
my suggestion: init/add tooltip inside main container swf.
as its singleton u can get him from everywhere.(ToolTip.getInstance())
thx