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.