PrimeFaces Extensions Showcase

Tooltip

Global tooltip uses title values of JSF components. Global tooltips are normally applied to all components on a page. But this behavior can be done much smarter. Global tooltips can be limited to specified components by the "for" attribute. The example below shows a case when tooltips only appear for components which didn't pass validation (in this case required inputs). This is a quite nice replacement for regular error messages.

First Name: *
Last Name: *

Source

XHTML page


<h:panelGrid id="details" columns="2" columnClasses="formColumn1,formColumn2">
    <p:outputLabel for="firstName" value="First Name: "/>
    <p:inputText id="firstName" required="true" title="#{component.valid ? '' : 'First Name can not be empty'}"/>
    <p:outputLabel for="lastName" value="Last Name: "/>
    <p:inputText id="lastName" required="true" title="#{component.valid ? '' : 'Last Name can not be empty'}"/>
</h:panelGrid>

<p:commandButton value="Submit" process="details" update="details tooltip" style="margin-top: 10px;"/>

<pe:tooltip id="tooltip" global="true" for="@(.ui-state-error)" header="Error" styleClass="qtip qtip-red qtip-rounded qtip-shadow" myPosition="left center" atPosition="right center" />