Flex sample application

Callouts are most frequently used to annotate spatially organized content such as maps or product images with additional details. They are more persistent and more discoverable than tooltips since they appear always, not only on mouse hover, and generally don’t disappear unless the user explicitly dismisses them. They are an example of annotating content displays with additional contextual details.

Demo: The Callout component. Place your mouse over any of the airplanes in the SWF file to see additional information appear. Note that this component is still in beta. Feel free to use it however you wish, but keep in mind that parts may contain bugs. Give us feedback on the Flex Interface Guide Forum.

To download and view the full source, right-click the Flex application and select View Source from the context menu. Otherwise, you can use the download link below.

Download the code

Note: This component is licensed as Sample Code as defined in the Flex End User License Agreement. You may use the sample code in your products, commercial or not.

Component guidelines

When using the Callout component, keep in mind the following guidelines:

• Use callouts to display additional details about aspects of spatially organized content such as maps and product images. For example, a mapping application may use callouts to display restaurant names and phone numbers on a map.
• Use callouts to annotate controls or other UI elements during a tutorial or walk-through. For example, a form processing application may use callouts to guide users to the button that advances them to the next step in their workflow.
• Do not use callouts to display error messages or warnings. Instead, use Validator controls.
• Do not use callouts to display the name or a short description of a control when a user hovers his/her mouse over an object or text. Instead, use tooltips.
• Do not display too much information in a callout. If the callout takes up too much of the content display it will obscure the content itself. Instead, display the details users access most frequently in the callout and then provide a link to less-recently-used details.
• If there might be many callouts on a content display, show them all initially in the collapsed mode. Display the partially expanded mode when a user hovers his/her mouse over the object or text.

If users are likely to compare a callout’s contents with other callouts or other information in the application, use the fully expanded state, so that the callout details remain within the user’s interface even if the user’s mouse is not over the particular object or text.

Component features

Some of the features of the Callout component include:

• Instantiation through MXML and ActionScript
• Supports placement through absolute positioning
• Supports state transitions and skinning
• Adjustment of pointer size and direction through styles and CSS
• Supports four orientations: topRight, bottomRight, bottomLeft, and topLeft
  
  

How to use the component

The callout extends the Container class by adding a pointer border skin through the ISimpleStyleClient interface. The skin respects the absolute positioning of the callout in relation to the tip of the pointer to allow for pixel perfect positioning.

This custom component uses the validation methods of the framework to draw the border around the content and respects state changes as well as style change events. State changes allow this component to resize based on the user’s behavior.

This content is a public draft. Please give us feedback in the Flex Interface Guide Forum.