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

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.