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 for all the components, which have a title attribute set. This is a preferable approach to using a <p:tooltip> component for each component separately. You can customize tooltips for any specific component by adding <p:tooltip> to the respective component individually.

上一章目录下一章