primefaces dialog as a tooltip like facebook show people details - primefaces

Question

I want to show the details of a person with a dialog as shown on Facebook when the mouse is placed on a person's name.
I am using dialog framework in primefaces.
The dialog should display data that must be loaded when the mouse is placed on the person.
The problem is the dialog position:
<p:dataTable filterDelay="700" reflow="true" emptyMessage="No se encontraron elementos" widgetVar="tblist"
id="dataTableList" var="item" paginator="true" paginatorPosition="bottom"
rows="10" rowKey="#{item.idPersona}" value="#{listadoPersonasMB.listPersonas}" filteredValue="#{listadoPersonasMB.filterlistPersonas}">
<f:facet name="header">
Resultado de la búsqueda #{listadoPersonasMB.cantPerFilter}
</f:facet>
<p:ajax event="filter" oncomplete="handleLoadStart();"/>
<p:column style="width: 50px">
<p:graphicImage style="border-radius: 50%" alt="image" id="fotoPer" value="#{listadoPersonasMB.fotoPersonaTabla}" cache="false" width="100%">
<f:param name="personId" value="#{item.idPersona}" />
</p:graphicImage>
</p:column>
<p:column width="100%" headerText="Nombre y apellidos" sortBy="#{item.nombre}" style="text-align: left" filterBy="#{item.nombre} #{item.nombre2} #{item.apellidos} #{item.apellidos2}" filterMatchMode="contains">
<p:commandLink ajax="false" id="pict" action="#{mBDetallesPersona.detallesPersona(item.idPersona)}" onmouseover="showPersonDetail();">
<h:outputText value="#{item.nombre} #{item.nombre2} #{item.apellidos} #{item.apellidos2}"/>
</p:commandLink>
</p:column>
</p:dataTable>
<p:remoteCommand id="rcomperson" name="showPersonDetail" process="#this"
actionListener="#{listadoPersonasMB.showPersonDetail}"
update=":form2:perDeta" oncomplete="PF('carOP').show('#{component.clientId}')"
/>
<p:overlayPanel widgetVar="carOP" showEffect="fade" hideEffect="fade">
<p:outputPanel id="perDeta">
<ui:include src="perDialog.xhtml" />
</p:outputPanel>
</p:overlayPanel>

Answer 1

I finally found the solution with overlayPanel, remoteCommand and some javascript code
xhtml
<p:dataTable filterDelay="700" reflow="true" emptyMessage="No se encontraron elementos" widgetVar="tblist"
id="dataTableList" var="item" paginator="true" paginatorPosition="bottom"
rows="10" rowKey="#{item.idPersona}" value="#{listadoPersonasMB.listPersonas}" filteredValue="#{listadoPersonasMB.filterlistPersonas}">
<f:facet name="header">
Resultado de la búsqueda #{listadoPersonasMB.cantPerFilter}
</f:facet>
<p:column style="width: 50px">
<p:graphicImage style="border-radius: 50%" alt="image" id="fotoPer" value="#{listadoPersonasMB.fotoPersonaTabla}" cache="false" width="100%">
<f:param name="personId" value="#{item.idPersona}" />
</p:graphicImage>
</p:column>
<p:column width="100%" headerText="Nombre y apellidos" sortBy="#{item.nombre}" style="text-align: left" filterBy="#{item.nombre} #{item.nombre2} #{item.apellidos} #{item.apellidos2}" filterMatchMode="contains">
<p:commandLink ajax="false" action="#{mBDetallesPersona.detallesPersona(item.idPersona)}" onmouseover="loadPersonDetalles('#{component.clientId}', #{item.idPersona});">
<h:outputText value="#{item.nombre} #{item.nombre2} #{item.apellidos} #{item.apellidos2}"/>
</p:commandLink>
</p:column>
<p:column headerText="Edad" sortBy="#{item.calculaEdad()}" style="text-align: right; width: 60px" sortFunction="#{utilMB.ordenarEnteros}">
<h:outputText value="#{item.calculaEdad()}"/>
</p:column>
<p:column filterBy="#{item.miembro eq true ? 'Sí' : 'No'}" headerText="Membresía" filterMatchMode="contains" style="width: 220px">
<h:outputText value="#{item.miembro eq true ? 'Sí' : 'No'}" />
<span> <p:commandButton rendered="#{mBLogin.siTieneFuncion('AdminPersonas')}" icon="fa fa-refresh Fs16 white" title="Cambiar"
actionListener="#{listadoPersonasMB.selectToSetMember(item)}" oncomplete="PF('newDialog').show()"/> </span>
</p:column>
<p:column style="text-align: center; width: 40px" rendered="#{mBLogin.siTieneFuncion('AdminPersonas')}">
<p:commandButton icon="fa fa-pencil Fs16 white" title="Modificar"
action="#{listadoPersonasMB.cargaPersonaModi(item.idPersona)}"/>
</p:column>
<p:column style="text-align: center; width: 40px" rendered="#{mBLogin.siTieneFuncion('AdminPersonas')}">
<p:commandButton icon="fa fa-trash Fs16 white" title="Dar Baja"
action="#{mBDeletePersona.detallesPersona(item.idPersona)}"/>
</p:column>
</p:dataTable>
<p:remoteCommand name="showPersonDetail" process="#this"
actionListener="#{listadoPersonasMB.showPersonDetail}"
update=":form2:perDeta" oncomplete="loadPanel();"/>
<p:overlayPanel widgetVar="carOP" my="right bottom" showEffect="fade" hideEffect="fade"
dismissable="true" hideEvent="onmouseout"
dynamic="true"
>
<p:outputPanel id="perDeta">
<ui:include src="perDialog.xhtml" />
</p:outputPanel>
</p:overlayPanel>
javascript code, send param to remoteCommand
<h:outputScript id="waypointScript" target="body">
var idcom = 0;
function loadPersonDetalles(idC, idPer) {
showPersonDetail([{name:'x', value:idPer}, {name:'y', value:20}]);
idcom = idC;
}
function loadPanel() {
PF('carOP').show(idcom);
}
</h:outputScript>
backingbean
public void showPersonDetail() {
try {
Map<String, String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
this.idPerSeledtToDialog = Integer.valueOf(params.get("x"));
} catch (Exception e) {
JsfUtil.addErrorMessage(e, "Error: filterListener() " + e.getMessage());
}
}