Skip to content
August 18, 2008 / Shrikant Patil

Flex Image ToolTip Component

Flex has Built-In support to display the ToolTips. The Built-In Options of ToolTip doesn’t support to display the IMAGES in ToolTips. This looks like a restriction to one who wants to show IMAGES in ToolTips along with TEXT. So i have created a Image ToolTip Component, Which allows you to specify any Embedded Image or any Image URL to display an image into ToolTip along with Text below the Image.

The component extends VBOX and implements IToolTip interface (The custom ToolTip component must implement this interface). Component begins setting the padding’s on all four sides, background alpha and background color. It creates an Image component and a label component to display the specified image and TootTip text. The setter function for TootTip image checks for the data type of parameter, weather the parameter is Class (means Embeded Image) or a String (mean that it is a URL to load image).
So here is source code of the component;

package com
{
    import flash.display.Bitmap;

    import mx.containers.*;
    import mx.controls.Image;
    import mx.controls.Label;
    import mx.core.*;

    public class ExtendToolTip extends VBox implements IToolTip
    {
        private var image:Bitmap = new Bitmap();
        private var lbl:Label;
        private var imageHolder:Image;
        private var tipText:String;

        [Bindable]
        public function set ImageTip(img:*):void{
            if(img is Class){
            imageHolder.source = new img().bitmapData;
            }
            if(img as String){
                imageHolder.load(img);
            }
        }

        [Bindable]
        public function set TipText(txt:String):void{
            lbl.text = txt;
        }
        public function get TipText():String{
            return tipText;
        }
        public function ExtendToolTip()
        {
            mouseEnabled = false;
            mouseChildren = false;
            setStyle("paddingLeft",10);
            setStyle("paddingRight",10);
            setStyle("paddingTop",10);
            setStyle("paddingBottom",10);
            setStyle("backgroundAlpha",0.5);
            setStyle("backgroundColor",0xffffff);
            imageHolder = new Image();
            lbl  = new  Label();
            imageHolder.source = image;
            addChild(imageHolder);
            addChild(lbl);
        }
        public function get text():String
        {
            return null;
        }
        [Bindable]
        public function set text(value:String):void    {
            tipText = value;
        }
    }
}

It is important to understand how to use this component. we need to use the event ‘toolTipCreate‘ of a component  to call a method which creates a custom ToolTip for that component. here is example how to use the component.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
	import mx.events.ToolTipEvent;
	import com.*;
	[Embed(source="assets/addCart.gif")]
	private var tipImg:Class;

	private function createTip(tip:String):ExtendToolTip{
	   var imageToolTip:ExtendToolTip = new ExtendToolTip();
	   //for embeded image
	   imageToolTip.ImageTip = tipImg;
	   //for external image
	   //imageToolTip.ImageTip = "http://l.yimg.com/t/img/new_in_fp_logo.gif";
	   imageToolTip.TipText = tip;
	   return imageToolTip;
	}
]]>
</mx:Script>
	<mx:Button toolTipCreate="event.toolTip=this.createTip(event.currentTarget.toolTip)"
	toolTip="Image ToolTip" label="ToolTip"/>
</mx:Application>

The toolTipCreate event calls the createTip method and passes the ToolTip text to display. The method createTip create a new ImageTooTip component and assign the image and text to display in ToolTip.

About these ads

8 Comments

Leave a Comment
  1. Hoang Le Minh / Aug 29 2008 3:42 am

    great works, Thanks

  2. Wes Duff / Oct 31 2008 2:39 pm

    There were a few problems here.

    By the way THANKS! for the code.

    # [Bindable]
    # public function set ImageTip(img:*):void{
    # if(img is Class){
    # imageHolder.source = new img().bitmapData;
    # }
    # if(img as String){
    # imageHolder.load(img);
    # }
    # }

    I get an error here if I set this to [Bindable].
    I take away [Bindable] and it works.

  3. Fayez / Mar 13 2009 3:22 pm

    Thank you for this. We appreciate the contribution.

  4. Nilesh / Jan 6 2010 6:12 am

    Amazing work, Works perfect on Renderers also.

  5. calvin / Jul 12 2010 4:25 pm

    trying to do this with flex 4, thanks for the post by the way, I’m nopt getting errors have to now use addElement but the image doesnt show up despite me sending a BitmapData object to the Image source property…

    public function ImageToolTip():void
    {
    super();

    mouseEnabled = false;
    mouseChildren = false;
    setStyle(“paddingLeft”,10);
    setStyle(“paddingRight”,10);
    setStyle(“paddingTop”,10);
    setStyle(“paddingBottom”,10);
    setStyle(“backgroundAlpha”,0.5);
    setStyle(“backgroundColor”,0xffffff);
    imageHolder = new Image();
    imageHolder.width=200;
    imageHolder.height=200;
    lbl = new Label();
    imageHolder.source = image;
    addElement(imageHolder);
    //addChild(imageHolder);
    addElement(lbl);
    lbl.text=”can you see this “;
    //addChild(lbl);
    }

    public function set ImageTip(img:*):void
    {
    //trace(“img”,img)
    if(img is BitmapAsset)
    {
    //var imgObj:BitmapAsset = new img() as BitmapAsset;

    imageHolder.source=img as BitmapAsset;
    imageHolder.width=200;
    imageHolder.height=200;
    trace(“img”,img as BitmapAsset,imageHolder)
    }
    if(img as String)
    {
    //trace(“trying to load”,img)
    imageHolder.load(img);
    }
    }

  6. calvin / Jul 12 2010 5:01 pm

    It is very important to use the correct handler

    I was doing something like

    <s:Button toolTipCreate="toolTipCreateHandler('5')" toolTip="5 {label_a}"….

    which did not do something with the tooltip manager that was needed.

  7. er3ctus / May 29 2012 3:19 pm

    Hi thanks for this tutorial:

    I have this runtime error:
    I have followed exactly this example, but I have a runtime error :

    ReferenceError: Error #1069: Property bitmapData not found on SWFLoaderStyleembed_css_Assets_swf__brokenImage_1882983457 and there is no default value. at be.rtbf.radio.cockpit.commons.view::ExtendedToolTip/set imageTip()[C:\projets\cockpitRadio\trunk\flex\trunk\cockpit-commons-flex\src\main\flex\be\rtbf\radio\cockpit\commons\view\ExtendedToolTip.as:25] at be.rtbf.radio.cockpit.onAir.module.view::RadioOnAir/createToolTip()[ Blockquote

    Can you help please?

Trackbacks

  1. Blog of Cihan Polat » Flex Image ToolTip

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: