Simple function for tooltip creation in Actionscript 3

[Guest]

Hi,

I'm new to Actionscript 3 and I am currently creating an application in which I need to use tooltips.  I thought it would be straightforward because in VBA and other object-oriented languages, you  have a tooltip property of a button and all you need is enter the text there (or else program it, which is very straightforward).  However, I cannot manage to create tooltips in Flash using AS3, I have tried 6 different (quite complex) methods from code which I found online but could get none of them to work.  Can someone please give me a simple function which takes as parameters the tooltip text and the original button and then the function just creates the tooltip automatically once it's called? Any help would be greatly appreciated. Thanks.

[kglad]

:

function addToolTipF(dobj:DisplayObjectContainer,x:int,y:int,s:String):TextField{

var tf:TextField=new TextField();

tf.text=s;

tf.multiline=false;

tf.autoSize="left";

tf.border=true;

dobj.addChild(tf);

tf.x=x;

tf.y=y;

return tf;

}

function removeToolTipF(tf:TextField):void{

tf.parent.removeChild(tf);

}

[Guest]

That's very helpful kglad, at least it didn't give me any errors.  However it did give me errors when I tried to call the functions, like this:

mc.addEventListener(MouseEvent.MOUSE_OVER,addToolTipF(mc,2,2,"hello"));
mc.addEventListener(MouseEvent.MOUSE_OUT, removeToolTipF(mc,2,2,"hello"));

Note: mc is the instance name of a particular button.  Any suggestions? Thanks a lot for your help.

[kglad]

you can't add parameters using addEventListener().  at least, you can't do it like that.

assuming you're using movieclip buttons, use:

mc.ttText="hello";

mc.ttX=2;

mc.ttY=2;

mc.addEventListener(MouseEvent.MOUSE_OVER,addToolTipF) ;

mc.addEventListener(MouseEvent.MOUSE_OUT, removeToolTipF);

////////////////////////////////////change nothing below/////////////////////////

function addToolTipF(e:MouseEvent):void{

var mc:MovieClip=MovieClip(e.currentTarget);

var tf:TextField=new TextField();

mc.tf=tf;

tf.text=mc.ttText;

tf.multiline=false;

tf.autoSize="left";

tf.border=true;

mc.addChild(tf);

tf.x=mc.ttX;

tf.y=mc.ttY;

}

function removeToolTipF(e:MouseEvent):void{

var mc:MovieClip=MovieClip(e.currentTarget);

mc.removeChild(mc.tf);

mc.tf=null;

}

[Guest]

I'm actually using normal buttons and thus it's giving me the following error:

Access of possibly undefined property ttText/ttX/ttY through a reference with static type flcontrols: Button.  How can I go around this? And how can I change the colour of the tooltip to light yellow and reduce a bit the font size? thanks a lot

Note: it worked well with, for example, a movieclip play button so that's a step forward...thanks

[Guest]

Can this be done for normal buttons instead of movieclip ones??? thanks

[kglad]

it can but using simple buttons adds complexity to the coding:

// create one buttonObj for all your buttons

var buttonObj:Object={};

//////////////////////////////////////change nothing above ////////////////////////////////////

//the next 3 lines need to be done for all your buttons

buttonObj[yourbutton] = ["hello",2,2];

yourbutton.addEventListener(MouseEvent.MOUSE_OVER,addToolTipF) ;

yourbutton.addEventListener(MouseEvent.MOUSE_OUT, removeToolTipF);

////////////////////////////////////change nothing below/////////////////////////

function addToolTipF(e:MouseEvent):void{

var a:Array = buttonObj[e.currentTarget];

var tf:TextField=new TextField();

buttonObj[e.currentTarget].push(tf);

tf.text=a[0];

tf.multiline=false;

tf.autoSize="left";

tf.border=true;

addChild(tf);

tf.x=a[1]+e.currentTarget.x;

tf.y=a[2]+e.currentTarget.y;

}

function removeToolTipF(e:MouseEvent):void{

removeChild(buttonObj[e.currentTarget][3]);

buttonObj[e.currentTarget].split(3,1);

}

[Guest]

Dear kglad,

Thanks once again for your help.  I must admit that although in general I manage to understand the ideas behind programs, I'm finding Actionscript 3 very difficult to handle by myself...so thanks

It worked but is still giving me an error: in the remove tooltip function, after I hover over the button more than once, the function doesn't work and the tooltip remains visible.  The error it's giving me is the following:

ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
    at flash.display::DisplayObjectContainer/removeChild()
    at AIM_v1_fla::MainTimeline/removeToolTipF()

Any ideas how I can go around this? Thanks.

[kglad · Accepted solution]

if both the add and remove functions are on the same timeline you won't see that error message.  but i see a typo:

// create one buttonObj for all your buttons

var buttonObj:Object={};

//////////////////////////////////////change nothing above ////////////////////////////////////

//the next 3 lines need to be done for all your buttons

buttonObj[yourbutton] = ["hello",2,2];

yourbutton.addEventListener(MouseEvent.MOUSE_OVER,addToolTipF) ;

yourbutton.addEventListener(MouseEvent.MOUSE_OUT, removeToolTipF);

////////////////////////////////////change nothing below/////////////////////////

function addToolTipF(e:MouseEvent):void{

var a:Array = buttonObj[e.currentTarget];

var tf:TextField=new TextField();

buttonObj[e.currentTarget].push(tf);

tf.text=a[0];

tf.multiline=false;

tf.autoSize="left";

tf.border=true;

addChild(tf);

tf.x=a[1]+e.currentTarget.x;

tf.y=a[2]+e.currentTarget.y;

}

function removeToolTipF(e:MouseEvent):void{

removeChild(buttonObj[e.currentTarget][3]);

buttonObj[e.currentTarget].splice(3,1);

}

[Guest]

It worked...thank you very very much

[Guest]

Sorry to disturb again, but I noticed now that although it worked on one button, when I have multiple buttons the tooltip text remains the same for each button.  For example, when I write the following, the tooltip text is "Add requirement to Custom Requirements" for both buttons.  If I change the order of the two code parts, the tooltip text becomes "Add requirement to Standard Requirements Library" for both buttons.

buttonObj[Add_Standard_Req_btn] = ["Add requirement to Standard Requirements Library",20,-25];
Add_Standard_Req_btn.addEventListener(MouseEvent.MOUSE_OVER,addToolTipF) ;
Add_Standard_Req_btn.addEventListener(MouseEvent.MOUSE_OUT, removeToolTipF);

buttonObj[Add_Custom_Req_btn] = ["Add requirement to Custom Requirements",20,-25];
Add_Custom_Req_btn.addEventListener(MouseEvent.MOUSE_OVER,addToolTipF) ;
Add_Custom_Req_btn.addEventListener(MouseEvent.MOUSE_OUT, removeToolTipF);

So I'm assuming I need to "reset" the text before calling each function.  Any ideas how? Thanks once aain.

[kglad]

use:

// create one buttonObj for all your buttons

var buttonObj:Object={};

//////////////////////////////////////change nothing above ////////////////////////////////////

//the next 3 lines need to be done for all your buttons

buttonObj[yourbutton.name] = ["hello",2,2];

yourbutton.addEventListener(MouseEvent.MOUSE_OVER,addToolTipF) ;

yourbutton.addEventListener(MouseEvent.MOUSE_OUT, removeToolTipF);

////////////////////////////////////change nothing below/////////////////////////

function addToolTipF(e:MouseEvent):void{

var a:Array = buttonObj[e.currentTarget.name];

var tf:TextField=new TextField();

buttonObj[e.currentTarget.name].push(tf);

tf.text=a[0];

tf.multiline=false;

tf.autoSize="left";

tf.border=true;

addChild(tf);

tf.x=a[1]+e.currentTarget.x;

tf.y=a[2]+e.currentTarget.y;

}

function removeToolTipF(e:MouseEvent):void{

removeChild(buttonObj[e.currentTarget.name][3]);

buttonObj[e.currentTarget.name].splice(3,1);

}

[Guest]

Great, it worked now...thanks

[kglad]

you're welcome.

[Guest]

Dear kglad,

With reference to the Add tooltip function you provided, is there a way to introduce some delay before the tooltip appears e.g. a 3 second delay?  thanks in advance

[kglad]

you can use setTimeout() to introduce a delay:

// create one buttonObj for all your buttons

var buttonObj:Object={};

//////////////////////////////////////change nothing above ////////////////////////////////////

//the next 3 lines need to be done for all your buttons

buttonObj[yourbutton.name] = ["hello",2,2];

yourbutton.addEventListener(MouseEvent.MOUSE_OVER,addToolTipF) ;

yourbutton.addEventListener(MouseEvent.MOUSE_OUT, removeToolTipF);

////////////////////////////////////change nothing below/////////////////////////

function addToolTipF(e:MouseEvent):void{

setTimeout(toolTipF,3000,e);

}

function toolTipF(e:MouseEvent):void{

var a:Array = buttonObj[e.currentTarget.name];

var tf:TextField=new TextField();

buttonObj[e.currentTarget.name].push(tf);

tf.text=a[0];

tf.multiline=false;

tf.autoSize="left";

tf.border=true;

addChild(tf);

tf.x=a[1]+e.currentTarget.x;

tf.y=a[2]+e.currentTarget.y;

}

function removeToolTipF(e:MouseEvent):void{

removeChild(buttonObj[e.currentTarget.name][3]);

buttonObj[e.currentTarget.name].splice(3,1);

}

[Guest]

It gave me these errors:

TypeError: Error #1010: A term is undefined and has no properties.
    at Websiteversion3_Scene1_fla::MainTimeline/ToolTipF()
    at Function/http://adobe.com/AS3/2006/builtin::apply()
    at SetIntervalTimer/onTimer()
    at flash.utils::Timer/_timerDispatch()
    at flash.utils::Timer/tick()
TypeError: Error #2007: Parameter child must be non-null.
    at flash.display::DisplayObjectContainer/removeChild()
    at Websiteversion3_Scene1_fla::MainTimeline/removeToolTipF()

I think I need to import some library, is that possible?

[kglad]

search for ToolTipF to find the problem.

[Guest]

What do you mean? I wrote everything as you told me (see below) and got the errors:

buttonObj[Delete_btn.name] = ["Delete Requirement from List",20,-25];
Delete_btn.addEventListener(MouseEvent.MOUSE_OVER,addToolTipF) ;
Delete_btn.addEventListener(MouseEvent.MOUSE_OUT, removeToolTipF);

function addToolTipF(e:MouseEvent):void{
   setTimeout(ToolTipF,1000,e);
}

function ToolTipF(e:MouseEvent):void{
var a:Array = buttonObj[e.currentTarget.name];
var tf:TextField=new TextField();
buttonObj[e.currentTarget.name].push(tf);
tf.text=a[0];
tf.multiline=false;
tf.autoSize="left";
tf.border=true;
tf.background=true;
addChild(tf);
tf.x=a[1]+e.currentTarget.x;
tf.y=a[2]+e.currentTarget.y;
}

function removeToolTipF(e:MouseEvent):void{
removeChild(buttonObj[e.currentTarget.name][3]);
buttonObj[e.currentTarget.name].splice(3,1);
}

[kglad]

that's not the code i suggested.  you changed toolTipF to ToolTipF.

anyway, you look like you did that consistantly so there will be no error from the code you showed.

i see you'll have a different problem if you ever mouseout before the tooltip is created.  you'll need to a reference to setTimeout and add code to removeToolTipF to account for that situation.

once this ToolTipF issue is resolved you should start a new thread with the code you're using if you need help with removeToolTipF.

[Guest]

Apologies but can't understand what you mean.  Error is also being given to me if I don't remove the mouse pointer from the button, and the tooltip doesn't even appear....

[kglad]

you changed toolTipF to ToolTipF.

do you understand that?

[Guest]

Yes, but as you said, I changed that throughout so it doesn't make a difference.  I also tried it in small letters throughout but still didn't work - obviously.  Problem seems to be with the new function introduced as before both add and remove functions were working.  However, since the tooltip is appearing immediately I need to introduce a delay as otherwise it becomes annoying. thanks.

[kglad]

ok, so you understand the first and second sentences.  so, the error iis from some code other than what you showed.

click file/publish settings/flash and tick "permit debugging".  retest.  the error message will indicate the frame that contains the faulty code and the line number.  paste the code from that frame and highlight the problematic line of code in a new thread.

[Guest]

Error is in the function.  Look - this works:

buttonObj[Save_btn.name] = ["Save Current Product Requirements to XML file",-50,-25];
Save_btn.addEventListener(MouseEvent.MOUSE_OVER,addToolTipF) ;
Save_btn.addEventListener(MouseEvent.MOUSE_OUT, removeToolTipF);

//function addToolTipF(e:MouseEvent):void{
//   setTimeout(toolTipF,3000,e);
//}

function addToolTipF(e:MouseEvent):void{
var a:Array = buttonObj[e.currentTarget.name];
var tf:TextField=new TextField();
buttonObj[e.currentTarget.name].push(tf);
tf.text=a[0];
tf.multiline=false;
tf.autoSize="left";
tf.border=true;
tf.background=true;
addChild(tf);
tf.x=a[1]+e.currentTarget.x;
tf.y=a[2]+e.currentTarget.y;
}

function removeToolTipF(e:MouseEvent):void{
removeChild(buttonObj[e.currentTarget.name][3]);
buttonObj[e.currentTarget.name].splice(3,1);
}

This doesn't (only changes performed are in bold, so error must be in the bold parts):

buttonObj[Save_btn.name] = ["Save Current Product Requirements to XML file",-50,-25];
Save_btn.addEventListener(MouseEvent.MOUSE_OVER,addToolTipF) ;
Save_btn.addEventListener(MouseEvent.MOUSE_OUT, removeToolTipF);

function addToolTipF(e:MouseEvent):void{
   setTimeout(toolTipF,3000,e);
}

function toolTipF(e:MouseEvent):void{
var a:Array = buttonObj[e.currentTarget.name];
var tf:TextField=new TextField();
buttonObj[e.currentTarget.name].push(tf);
tf.text=a[0];
tf.multiline=false;
tf.autoSize="left";
tf.border=true;
tf.background=true;
addChild(tf);
tf.x=a[1]+e.currentTarget.x;
tf.y=a[2]+e.currentTarget.y;
}

function removeToolTipF(e:MouseEvent):void{
removeChild(buttonObj[e.currentTarget.name][3]);
buttonObj[e.currentTarget.name].splice(3,1);
}

The error:

TypeError: Error #2007: Parameter child must be non-null.
    at flash.display::DisplayObjectContainer/removeChild()
    at Websiteversion3_Scene1_fla::MainTimeline/removeToolTipF()[Websiteversion3_Scene1_fla.MainTimeline::frame1:246]
TypeError: Error #1010: A term is undefined and has no properties.
    at Websiteversion3_Scene1_fla::MainTimeline/toolTipF()[Websiteversion3_Scene1_fla.MainTimeline::frame1:234]
    at Function/http://adobe.com/AS3/2006/builtin::apply()
    at SetIntervalTimer/onTimer()
    at flash.utils::Timer/_timerDispatch()
    at flash.utils::Timer/tick()

Thanks in advance.