PopupAnchor is a new Gumbo component that you can use to display another component as a popup in the context of a layout. It is not what we can call "visual component" with background color and stuff like that, but it has some other properties such as width and height which make it capable of participating into the layout.
The popup you want to display will use this component as an anchor to be positioned in the application. This way, you can display it above, below, on the left, on the right of your anchor...

My popup

Here is my (really cheap) popup:

<?xml version="1.0" encoding="utf-8"?>
<s:Group  xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/halo">
         
  <s:Rect left="0" top="0" right="0" bottom="0">
    <s:fill>
      <s:SolidColor color="#C4C4C4" />
    </s:fill>
  </s:Rect>
 
  <s:SimpleText text="This is a simple example of what a popup can be"
                fontSize="20"
                color="#000000" />
</s:Group>

My application

And here is my application:

<?xml version="1.0" encoding="utf-8"?>
<s:Application    xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/halo"
                  xmlns:palleas="com.palleas.*"
                  minWidth="1024" minHeight="768">
  <s:states>
    <s:State name="default" />
    <s:State name="clicked" /> 
  </s:states>               

  <s:layout>
    <s:VerticalLayout />
  </s:layout>

    <s:BitmapImage  source="@Embed('assets/bleach.jpg')"
                    width="300"
                    height="300" />
    <s:PopUpAnchor  popUpPosition="left"
                    displayPopUp.clicked="true"
                    height="30">
      <palleas:PicturesPopup />
    </s:PopUpAnchor>
 
  <s:Button label = "Show Picture informations"
            label.clicked = "Hide Picture informations"
            click="{currentState = 'clicked'}"
            click.clicked="{currentState = 'default'}" />
</s:Application>

As you can see, I have two states in my application, a default one and a "clicked" one. When the current state is clicked, my button's label changes and the action too. But what is really important to notice is the "displayPopUp" property on my anchor: my popup is only visible when the current state is "clicked" (You can also trigger the display of the popUp manually, all you have to do is set the "displayPopup" property to true).

My application uses a basic VerticalLayout layout, my PopUpAnchor has a height of 30 pixels. As my popup uses it as an anchor, it's displayed just at the right place, which is (quoting the official spec) :
- The right edge of the popUp is adjacent to the left edge of the PopUpAnchor.
- The top edge of the popUp is horizontally aligned with the top edge of the PopUpAnchor.

Some of you may say "I can do exactly the same using states and a BasicLayout layout instead of a VerticalLayout one !" You're right, but why bother? As you can see my popup is not included in my layout and you couldn't reproduce that behavior easily using a specific layout (such as VerticalLayout, HorizontalLayout...). In this example, my popup is added as a child of the PopUpAnchor but I could totally have set the popup using its "popup" property.