Show text when hovering over an element in a dynamic search - ajax

Question

I have this code snipped which executes a dynamic search.
<f:facet name="right" >
<p:autoComplete id="searchTree"
placeholder="Search"
autoHighlight="true"
minQueryLength="2"
scrollHeight="700"
value="#{treeSelectionView.configItemDtoSearchSelected}"
completeMethod="#{treeSelectionView.searchAllNodes}"
var="configItemDtoSearch"
itemValue="#{configItemDtoSearch}"
itemLabel="#{configItemDtoSearch.name}"
effect="fade"
converter="#{treeSearchConverter}">
<p:ajax event="itemSelect" listener="#{depedencyView.onNodeSearchSelect}"
update="configItemForm:configItemTree configItemForm:toolBar :centerContentPanel :dependencyPanel"
oncomplete="focusOnSelectedTree()" />
</p:autoComplete>
</f:facet>
I have another property configItemDtoSearch.fullPath. I want to show that property when hovering over an item (identified by configItemDtoSearch.name) in the search results. Is there a build in functionality in primefaces for this ? How can I do that ?
PS: There seem to be such functionality using tooltip, but I have no idea how to combine them. It can probably be done using JavaScript as well. The problem is getting the var="configItemDtoSearch".

Answer 1

Have you tried Itemtip example on primeFaces
<p:outputLabel value="Itemtip:" for="itemTip" />
<p:autoComplete id="itemTip" value="#{autoCompleteView.theme3}" completeMethod="#{autoCompleteView.completeTheme}"
var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme}" converter="themeConverter" forceSelection="true">
<f:facet name="itemtip">
<h:panelGrid columns="2" cellpadding="5">
<f:facet name="header">
<h:outputText styleClass="ui-theme ui-theme-#{theme.name}" style="margin-left:50px" />
</f:facet>
<h:outputText value="Display:" />
<h:outputText value="#{theme.displayName}" />
<h:outputText value="Key" />
<h:outputText value="#{theme.name}" />
</h:panelGrid>
</f:facet>
</p:autoComplete>