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: admin@gmail.com)"/>
      
      <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="slide" hideEffect="explode" value="Please enter LastName"/>
      
      <p:commandLink id="photo" value="OptimusPrime"/>
      <p:tooltip for="photo">
        <p:graphicImage value="/resources/images/optimusprime.jpg"/>
      </p:tooltip>      
    </h:panelGrid>  
    
  </p:panel>
</h:form>

What just happened?

We have used the <p:tooltip> component to display tooltips with custom effects and events. Also, we have used the <p:tooltip> component to display HTML content such as images using <p:graphicImage>.

Using global tooltips

We can bind tooltips globally to all clickable elements with the title attribute instead of specifying for each element separately.

本周热推：
操作系统分析OpenVZ EssentialsInstant Optimizing Embedded Systems using BusyboxINSTANT Hyper-V Server Virtualization StarterINSTANT Migration from Windows Server 2008 and 2008 R2 to 2012 How-to
上一章目录下一章