Time for action – using global tooltips

Let us see how we can use global tooltips to display tooltips for all the components, which are specifying the title attribute. Perform the following steps:

1. Include a global Tooltip component and specify tooltips for various components using the title attribute as follows:

   <p:tooltip />
   <h:form>
       <h:panelGrid id="grid" columns="2" cellpadding="5">
           <h:outputText value="Input: " />
           <p:inputText id="focus" title="Tooltip for an input"/>
   
           <h:outputText value="Link: " />
           <h:outputLink id="fade" value="#" title="Tooltip for a link">
               <h:outputText value="Fade Effect" />
           </h:outputLink>
   
           <h:outputText value="Button: " />
           <p:commandButton value="Update" title="Update Components" update="@parent"/>
       </h:panelGrid>
   </h:form>

What just happened?

We have used a global <p:tooltip/> component to display tooltips...