Oracle ADF - Popup behavior in clientside

In this example explain how to show details data by popup for a table.

(1)Say table has following column and add client attributes to set row data to add popup behavior

<af:column id="c2" headerText="TraineeId">

<af:outputText value="#{row.Traineeid}" id="ot17" clientComponent="true">

<af:clientAttribute name="batchId" value="#{row.Batchid}"/>

<af:clientAttribute name="distance" value="#{row.Distance}"/>

<af:clientAttribute name="name" value="#{row.Name}"/>

<af:clientAttribute name="traineeId" value="#{row.Traineeid}"/>

<af:showPopupBehavior popupId="::p1" triggerType="mouseHover"

align="endAfter" alignId="ot17"/>

</af:outputText>

</af:column>

(2)Create a popup as follows(Sample code stuff to show above client attributes's data)

<af:popup id="p1" launcherVar="source" contentDelivery="lazyUncached"

eventContext="launcher">

<af:noteWindow id="nw1">

<af:panelFormLayout id="pfl1">

<af:panelLabelAndMessage label="batchId" id="plam1">

<af:outputText value="#{viewScope.batchId}" id="ot5"/>

</af:panelLabelAndMessage>

<af:panelLabelAndMessage label="distance" id="plam2">

<af:outputText value="#{viewScope.distance}"

id="outputText1"/>

</af:panelLabelAndMessage>

<af:panelLabelAndMessage label="name" id="plam3">

<af:outputText value="#{viewScope.name}" id="outputText2"/>

</af:panelLabelAndMessage>

<af:panelLabelAndMessage label="traineeId" id="plam4">

<af:outputText value="#{viewScope.traineeId}" id="outputText3"/>

</af:panelLabelAndMessage>

</af:panelFormLayout>

</af:noteWindow>

<af:setPropertyListener from="#{source.attributes.batchId}"

to="#{viewScope.batchId}" type="popupFetch"/>

<af:setPropertyListener from="#{source.attributes.distance}"

to="#{viewScope.distance}"

type="popupFetch"/>

<af:setPropertyListener from="#{source.attributes.name}"

to="#{viewScope.name}" type="popupFetch"/>

<af:setPropertyListener from="#{source.attributes.salary}"

to="#{viewScope.salary}" type="popupFetch"/>

<af:setPropertyListener from="#{source.attributes.traineeId}"

to="#{viewScope.traineeId}"

type="popupFetch"/>

</af:popup>

(3)You can see popup behavior as follows only using above code stuff samples.