Displaying an image in a Flex tooltip

Posted 2 April 2009 by Russ in Adobe Flex.

Demo and source code

This is a simple example that will display a panel with the details of an image as a tooltip, including a preview of the image itself.

This is shown here and the code is explained in step-by-step detail below. You can download and edit the source code, or right-click on the demo below and choose View Source to see how it all fits together.

Data and assets

The first thing we need is some data, so for this we set up a Value Object that describes our photo object. For this we simpy need a few basic properties including the title, the photographer details and the filename of the preview image we’re going to display on our tooltip. In our example this is saved as Photo.as in the valueObjects directory.

package valueObjects
{
 /**
  * Basic Value Object for a photo
  */
 [Bindable]
 public class Photo
 {
   public var title:String;
   public var filename:String;
   public var photographer:String;
   public var website:String;

   public function Photo()
   {
   }
 }
}

We also need some assets for our demo, a simple stylesheet and the preview images we’ll be displaying for each photo. These are all stored in the assets directory of our demo.

To keep things nice and simple we’ll break our demo down into separate simple components, of which there are two: PhotoView.mxml and PhotoToolTip.mxml. But before we look at those, let’s dive into our Application file Main.xml.

The Application

As this is a very simple demo Main.mxml contains very little MXML as it’s simpler just to build the app with ActionScript when the application loads. The only MXML code in here is a call to load the stylesheet for the demo, and then a Script block which handles our application build, which we’ll go through step-by-step…

The first few lines take care of the imports for our PhotoView component and the Photo Value Object:

import components.PhotoView;
import valueObjects.Photo;

Next we have our two application methods. The first of these – createPhoto() – creates a new Photo Value Object and a new PhotoView component. The component is then added to the Application view.

/**
 * Creates a new Photo object and adds it to the sample data collection
 */
 private function createPhoto(title:String, filename:String, photographer:String, website:String):void
 {
   var photo:Photo = new Photo();
   photo.title = title;
   photo.filename = filename;
   photo.photographer = photographer;
   photo.website = website;
   _photos.addItem(photo);
 }

The createPhoto() method is called a number of times when the Application is first compiled, via our only other method in Main.mxml: creationCompleteHandler(). The job of this method is simply to create some demo objects by some data to the createPhoto() method.

/**
 * Sets up the demo when the application creation has been completed
 */
 private function creationCompleteHandler():void
 {
   // set up the sample data
   createPhoto("Tomatoes", "1163182_tomatoes.jpg", "Edmondo Dantes", "http://www.sxc.hu/profile/edmondo");
   createPhoto("Oranges", "1118482_oranges.jpg", "chamanit", "http://www.sxc.hu/profile/chamanit");
   createPhoto("Lemons", "1126699_lemon.jpg", "abcdz2000", "http://www.sxc.hu/profile/abcdz2000");
   createPhoto("Peppers", "1163181_peppers.jpg", "Edmondo Dantes", "http://www.sxc.hu/profile/edmondo");
   createPhoto("Courgettes", "1163183_courgette.jpg", "Edmondo Dantes", "http://www.sxc.hu/profile/edmondo");
 }

That takes care of our main Application. Next is the PhotoView component…

PhotoView.mxml

For each photo we want to show a simple red box with the title text in it. When you hover over this box, we want to show the rest of the information for the photo, along with the image, as a tooltip. So PhotoView.mxml is a simple VBox component with a Text object inside it. It expects a Photo Value Object for its data, so we bind the Photo.title property to the value of the Text object:

<mx:Text text="{photo.title}" />

The only MXML object in here is a Script block, which takes care of our tooltip behaviour. The first few lines take care of our imports – the ToolTipEvent Class and our Photo Value Object.

import mx.events.ToolTipEvent;
import valueObjects.Photo;

We then create a public bindable variable to contain the Photo data and it’s this variable that’s populated in the createPhoto() mehod of Main.mxml each time a photo is added.

[Bindable]
public var photo:Photo;

Next we have two methods, the first of which is our creationCompleteHandler(). This is called when the PhotoView component is compiled and simply assigns a new event listener that will detect the creation of a tooltip and fire our second method: toolTipCreateHandler().

/**
 * Adds a TOOL_TIP_CREATE event on this component
 */
 private function creationCompleteHandler():void
 {
   addEventListener(ToolTipEvent.TOOL_TIP_CREATE, toolTipCreateHandler);
 }

Our toolTipCreateHandler() method follows and it’s purpose is to instantiate a new PhotoToolTip component, pass it the Photo Value Object for this particular photo, and then assign the component as to the tooltip event.

/**
 * Event handler method to create a new tooltip object
 */
 private function toolTipCreateHandler(ev:ToolTipEvent):void
 {
   var tooltip:PhotoToolTip = new PhotoToolTip();
   tooltip.photo = photo;
   ev.toolTip = tooltip;
 }

So what’s happening here? Basically when you hover your mouse over a instance of the PhotoView component, a ToolTipEvent.TOOL_TIP_CREATE event is fired and our toolTipCreateHandler() method intercepts this and assigns a PhotoToolTip component as the tooltip property of the event, effectively overriding the default text tooltip that you get out of the box. There is only one thing left to do here to make the ToolTipEvent fire: we need to set the tooltip property of the PhotoView component itself, which is done as follows in the properties of the PhotoView.mxml file:

<mx:VBox
   xmlns:mx="http://www.adobe.com/2006/mxml"
   creationComplete="creationCompleteHandler();"
   toolTip="{photo.title}"
   >

PhotoToolTip.mxml

Our final piece of the jigsaw is the component we want to display as the tooltip and this is where PhotoToolTip.mxml comes in. This demo uses a simple Panel component containing Image and Text objects that display the photo data but you could use any component that extends the UIComponent Class. The important thing to note is that whatever component you choose, it must implement the IToolTip Interface and contain getter and setter methods for the text property, otherwise you’ll get errors when you compile your application.

The first line of our MXML file takes care of the implementation of the IToolTip Interface and adds a title to the Panel using the data from the Photo Value Object for this photo.

<mx:Panel
   xmlns:mx="http://www.adobe.com/2006/mxml"
   implements="mx.core.IToolTip"
   title="{_photo.title} by {_photo.photographer}"
   >

Next we have a Script block, the first part of which imports the Photo Value Object and declares a private bindable variable to hold the photo data.

import valueObjects.Photo;

/**
 * Variable to contain the Photo Value Object
 */
[Bindable]
private var _photo:Photo;

Then we have the text property and getter/setter methods that the IToolTip Interface requires:

/**
 * Required text property of the IToolTip interface
 */
private var _text:String;

/**
 * Getter method for text property, required for the IToolTip interface
 */
public function get text():String
{
  return _text;
}

/**
 * Setter method for text property, required for the IToolTip interface
 */
public function set text(value:String):void
{
  _text = value;
}

The last part of our Script consists of a setter method for the private variable _photo. We could avoid this by making the variable public but in the interests of keeping the way in which we get and set properties consistent, we have a setter method for this (we don’t need a getter for this example so this is left out).

/**
 * Setter method for photo property
 */
public function set photo(value:Photo):void
{
  _photo = value;
}

Finally we have the Image and Text objects within the Panel that will show the preview image and the photographer information stored in the photo’s Photo Value Object.

<mx:Image source="assets/images/{_photo.filename}" />
<mx:Text text="Profile: {_photo.website}" />

This technique should provide a simple foundation for tooltip usage beyond simple text descriptions and is one that you can expand upon for your own, perhaps more complex requirements.