Cascading af:popup windows

This time I'm back with a very simple tip on af:popup. The use case requirement was to display popup on another popup and the developers do not want to add an af:dialog or af:panelWindow to the parent popup as it does not gives the look and feel that they are looking for.

So the solution is to define the child popup inside the parent as nested. This makes sure that parent is displayed when child is made visible. What if one keep child outside of parent? Well,  if the child is kept outside of parent (note that parent popup, here, does not have af:dialog or af:panelWindow for holding its  contents) in JSF page, parent was getting closed while child is displayed. So the code snippet that worked for them look like as given below:

 <!-- Parent popup-->  
 <af:popup id="p1" autoCancel="disabled" contentDelivery="lazyUncached">  
      <af:outputText id="ot1" value="test value">  
           <af:showPopupBehavior popupId="shortDescPopup" align="endAfter" triggerType="mouseHover"/>  
      </af:outputText>  
      <!-- Child popup-->  
      <af:popup id="shortDescPopup" contentDelivery="immediate">  
           <af:outputText id="desc" value="This is from child popup"/>  
      </af:popup>  
 </af:popup>  
 <af:commandButton text="Shop Parent Popup" id="cb1">  
      <af:showPopupBehavior align="endAfter" popupId="p1"/>  
 </af:commandButton>