Tooltip help

[dips045]

Hi

I was after a bit of advice on how to go about creating tooltips.

I have thumbnails of different colours. When the user hovers over the thumbnail I want a tooltip to appear with the name of the colour.

What is the best way to do this?

I got the tooltip working - Just need a bit of guidance on the content of the tooltip!

This is my code so far but not sure how to go about creating multiple tooltips:

btn1.addEventListener("mouseOver", mouse_RollOver);
btn1.addEventListener("mouseOut", mouse_RollOut);
btn1.addEventListener("mouseMove", mouse_Move);
var tooltip:Tooltip = new Tooltip();
tooltip.txt.text="colour here";
tooltip.x=stage.mouseX;
tooltip.y=stage.mouseY-btn1.height;
function mouse_RollOver(e:MouseEvent):void {
addChild(tooltip);
var myTween:Tween=new Tween(tooltip,"alpha",Regular.easeIn,0,1,0.6,true); 
}
function mouse_RollOut(e:MouseEvent):void {
removeChild(tooltip);
} 
function mouse_Move(e:MouseEvent):void {
tooltip.x=stage.mouseX;
tooltip.y=stage.mouseY-btn1.height;

I don't want to repeat this code over and over for each button as there are quite a lot of thumbnails - I'd appreciate any advice or help on this...

Thanks

[Ned Murphy]

What I would do is have the rollover function define the location of the tooltip, probably with a a tad of a delay before displaying it to allow for mouse movement without tooltips flashing everywhere you go, using the event target (whichever button that is) to define the x/y location as needed.  Each button (as a movieclip) could have a 'tipcolor' property assigned to it that gets extracted also using the event target to get that information.

[Rothrock · Accepted solution]

You should make the buttons all instances of a your won base class that you write.

They can dispatch a tooltip event and then on your main timeline (or your document class or where ever) you can listen for that event. Something like this:

package {

          import flash.display.MovieClip;

          import flash.events.*;

          import flash.utils.Timer;

          import flash.events.EventDispatcher;

          public dynamic class MyButton extends MovieClip {

                    public static var defaultDelay:Number=1000;

                    public var tipText:String;

                    private var _timer:Timer;

                    private var _tipDelay:Number=0;

                    private var _intervalID:Number;

                    public function MyButton() {

                              stop();

                              addListeners();

                              addEventListener(Event.ADDED_TO_STAGE,init);

                    }

                    public function init(e:Event) {

                              removeEventListener(Event.ADDED_TO_STAGE,init);

                              tipDelay=KPButton.defaultDelay;

                              _timer.addEventListener(TimerEvent.TIMER,timerHandler);

                    }

                    private function addListeners() {

                              buttonMode=true;

                              mouseEnabled=true;

                              mouseChildren=false;

                              if (! hasEventListener(MouseEvent.MOUSE_OVER)) {

                                        addEventListener(MouseEvent.MOUSE_OVER,handleOver);

                                        addEventListener(MouseEvent.MOUSE_OUT,handleOut);

                                        addEventListener(MouseEvent.MOUSE_DOWN,handlePress);

                                        addEventListener(MouseEvent.CLICK,handleClick);

                              }

                    }

                    private function removeListeners() {

                              buttonMode=false;

                              mouseEnabled=false;

                              removeEventListener(MouseEvent.MOUSE_OVER,handleOver);

                              removeEventListener(MouseEvent.MOUSE_OUT,handleOut);

                              removeEventListener(MouseEvent.MOUSE_DOWN,handlePress);

                              removeEventListener(MouseEvent.CLICK,handleClick);

                    }

                    private function handleOver(e:MouseEvent):void {

                              if(e.buttonDown){

                                        return;

                              }

                              _timer.start();

                    }

                    private function handleOut(e:MouseEvent):void {

                              _timer.reset();

                              dispatchEvent(new Event("hideTip"));

                    }

                    private function handleClick(e:MouseEvent):void {

                              _timer.reset();

                    }

                    private function handlePress(e:MouseEvent):void {

                              _timer.reset();

                              dispatchEvent(new Event("hideTip"));

                    }

                    private function timerHandler(e:TimerEvent):void {

                              dispatchEvent(new Event("tooltip"));

                    }

                    public function set tipDelay(num:Number):void {

                              _tipDelay=num;

                              _timer=new Timer(_tipDelay,1);

                    }

                    public function get tipDelay():Number {

                              return _tipDelay;

                    }

          }

}

[Rothrock]

And in your main code something like this:

button1.tipText="This is pink."

addEventListener("tooltip" ,handleTip,true);

addEventListener("hideTip", hideTip, true);

function handleTip(e:Event){

          var target:MovieClip=MovieClip(e.target);

          trace("The tip is: "+target.tipText);

}

function hideTip(e:Event){

          trace("Hide the tip now");

}

That way you only need one listener and it will catch tooltip event whereever they come from.

[dips045]

Many thanks for all your help and advice Rothrock and Ned Murphy! It really helped I've got it working now.

Thanks for taking the time for sending the code!

[Rothrock]

Glad it worked out for you. If there is other stuff that you need to deal with, like changing the state on rollover, click, etc. You can put that code into that class as well. It is a very useful thing.