Time for action – displaying tooltip for UI components

Let us see how to display tooltips on various events, with different effects and containing HTML elements, such as images, by performing the following steps:

1. Create a form with input fields and add a <p:tooltip> component to display the tooltip using the following code:

   <h:form title="Tooltip demo form">
     <p:panel header="Form with Tooltips">
     
       <h:panelGrid columns="3">
         <p:outputLabel value="EmailId:"/>
         <p:inputText id="emailId" value=""/>
         <p:tooltip for="emailId" value="Please enter Email Id (Ex: [e-mail])"/>
         
         <p:outputLabel value="FirstName:"/>
         <p:inputText id="firstName" value=""/>
         <p:tooltip for="firstName" showEvent="focus" hideEvent="blur" value="Please enter FirstName"/>
         
         <p:outputLabel value="LastName:"/>
         <p:inputText id="lastName" value=""/>
         <p:tooltip for="lastName" showEffect...