5 Replies Latest reply on Jan 14, 2007 12:51 AM by Cheree Singal

    Inserting image into a tool tip

    Cheree Singal Level 1
      Can any1 plz tell me how to insert an image into a tooltip?

      Thanks in advance,
      Cheree
        • 1. Inserting image into a tool tip
          M. Huisman Level 1
          You can define a custom component based on a tooltip.

          So it should be possibe to create them there.

          You might even try putting it in HTML, using the url you posted yourself.

          http://labs.flexcoders.nl/samples/ToolTip/index.html
          • 2. Re: Inserting image into a tool tip
            mike_morearty Level 1
            Or more generally, add a handler for the "toolTipCreate" event, described here: http://livedocs.macromedia.com/flex/2/langref/mx/core/UIComponent.html#event:toolTipCreate

            For example:

            <mx:Button toolTipCreate="createMyCustomTooltip(event)" />

            function createMyCustomToolTipEvent(event:ToolTipEvent):void
            {
            event.toolTip = /* any visual object you want */;
            }
            • 3. Re: Inserting image into a tool tip
              Cheree Singal Level 1
              Huisman,
              I tried it. It showed a problem that the size of the tool tip is calculated according to the original text, e.g. <br> is not parsed as html, so half of the text is displayed outside tooltip...
              It would require more tweeking to become perfect.

              Thanks for replying:-)
              • 4. Re: Inserting image into a tool tip
                Cheree Singal Level 1
                Mike,
                Thanks for replying!
                I tried your suggestion. I created a customized tool-tip based on a VBox and which implemented IToolTip interface.
                It works perfectly. Thanks again.
                • 5. Re: Inserting image into a tool tip
                  Cheree Singal Level 1
                  Hi eclesia,

                  Sure... Cant think of any other way of sending;-) So pasing it in the mail itself.

                  ImageToolTip.as :

                  package ControlPanel{
                  import mx.core.*;
                  import mx.containers.*;
                  public class ImageToolTip extends VBox implements IToolTip{

                  public function CustomizeToolTip():void{
                  mouseEnabled = false;
                  mouseChildren=false;
                  setStyle("paddingLeft", 10);
                  setStyle("paddingTop", 10);
                  setStyle("paddingBottom", 10);
                  setStyle("paddingRight", 10);
                  }

                  public function get text():String {
                  return null;
                  }
                  public function set text(value:String):void {}
                  }
                  }

                  ImageToolTip.as is the customized tooltip. Now CustomToolTip extends it and is used in my application:

                  <?xml version="1.0" encoding="utf-8"?>
                  <comp:ImageToolTip xmlns:mx=" http://www.adobe.com/2006/mxml"
                  xmlns:comp="ControlPanel.*"
                  backgroundColor="#FFFFFF"
                  backgroundAlpha="{myBackgroundAlpha}"
                  styleName="clsCanvasWithBorder"
                  alpha="{myAlpha}"
                  dropShadowEnabled="{myDropShadowEnabled}"
                  dropShadowColor="{myDropShadowColor}">

                  <mx:Script>
                  <![CDATA[
                  [Bindable]
                  public var myImage:String;
                  [Bindable]
                  public var myBackgroundColor: String = "#FFFFFF";
                  [Bindable]
                  public var myBackgroundAlpha:Number=1;
                  [Bindable]
                  public var myDropShadowEnabled:Boolean=true;
                  [Bindable]
                  public var myDropShadowColor:uint=0x000000;
                  [Bindable]
                  public var myAlpha:Number=1;
                  ]]>
                  </mx:Script>
                  <mx:Spacer/>
                  <mx:HBox verticalAlign="middle">
                  <mx:Spacer/>
                  <mx:Image source="../images/cb1.jpg" />
                  <mx:Text text="Started"/>
                  </mx:HBox>
                  <mx:HBox verticalAlign="middle">
                  <mx:Spacer/>
                  <mx:Image source="../images/cb1.jpg" />
                  <mx:Text text="Stopped"/>
                  </mx:HBox>
                  <mx:Spacer/>
                  </comp:ImageToolTip>

                  Now, in ur application, suppose u want this tooltip for an image, then u can say:

                  <mx:Image source="../images/cb1.jpg" toolTip=" " toolTipCreate="event.toolTip=this.createTip()"/>

                  where createTip() is:

                  public function createTip(): CustomToolTip{
                  var myTT: CustomToolTip = new CustomToolTip();
                  return myTT;
                  }



                  You just have to keep these files in proper folders and see if they run.

                  Bye.