Advanced Callout Component

Most flex developers have become acquainted with the built-in tooltop the flex framework provides. It’s very convenient when all you need is a plain text hint to display briefly while the cursor is over a particular element.

But what’s a flex developer to do when more is called for? The flex tooltip sometimes just won’t cut it. To appease my appetite, I cooked myself up a callout component. Please, feast with me.

Here’s some of the features of the callout component:

  • Location-aware — It knows how far it is from the edge of the stage. If it’s too close to any edge of the stage, it knows to put the callout bubble in a direction that won’t make it display off-screen.
  • IUIComponent support — Anything you could stick in any other flex container you can stick inside the callout.
  • Skinnable — You can provide a custom skin for the tail and/or bubble.
  • Stylable — Several styles are supported such as background color, background alpha, padding, tail size, tail offset, preferred tail position, etc.
  • Flexible anchoring — You can anchor the callout (where the tail points to) to either a component or a specific point on the stage.

See it for yourself here! Right-click for the source. If you find bugs or make improvements, please let me know and I’ll post the changes.

Here are some known limitations:

  • Currently the tail can only be positioned on the corners or the center of a side. It can’t be offset from the center of a side. If you don’t know what I mean, you probably won’t notice.
  • The analysis of where the tail will be placed given stage limitations is done in a clockwise fashion. In other words, if the callout can’t fit on the stage with the tail on the bottom-left, it will try placing the tail on the left, then the top-left, then the top, etc. However, you can declare which position you would prefer (using the preferredTailPosition style) and it will perform the analysis in a clockwise fashion from that position.
  • Fade effects applied to the callout won’t work quite as expected due to overlapping skin parts.
  • Using a Text component for the content property doesn’t work currently. This should be fully supported; I just haven’t got around to fixing it.

View Demo

Fork Project

Like what you read? Give Aaron Hardy a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.