Tooltip

Tooltip has various customization options such as effects, events and custom content support.

Focus/Blur:
Fade: Fade Effect
Fade effect is used by default
Track Mouse: Mouse Tracking
This tooltip tracks mouse position
Clip/Explode: Clip/Explode Effects
This tooltip uses clip/explode effects for the animation
Content: PrimeFaces

Source

<h:panelGrid columns="3" cellpadding="10">

    <h:outputText value="Focus/Blur: " />
    <p:inputText id="focus" title="This tooltip is displayed when input gets the focus"/>
    <p:tooltip id="toolTipFocus" for="focus" showEvent="focus" hideEvent="blur" />

    <h:outputText value="Fade: " />
    <h:outputLink id="fade" value="#">
        <h:outputText value="Fade Effect" />
    </h:outputLink>
    <p:tooltip id="toolTipFade" for="fade" value="Fade effect is used by default" />

    <h:outputText value="Track Mouse: " />
    <h:outputLink id="track" value="#">
        <h:outputText value="Mouse Tracking" />
    </h:outputLink>
    <p:tooltip id="toolTipTrack" for="track" value="This tooltip tracks mouse position" trackMouse="true"/>

    <h:outputText value="Clip/Explode: " />
    <h:outputLink id="grow" value="#">
        <h:outputText value="Clip/Explode Effects" />
    </h:outputLink>
    <p:tooltip id="toolTipGrow" for="grow" value="This tooltip uses clip/explode effects for the animation"
            showEffect="clip" hideEffect="explode" />

    <h:outputText value="Content:  " />
    <h:outputLink id="lnk" value="#">
        <h:outputText value="PrimeFaces" />
    </h:outputLink>
    <p:tooltip id="toolTipLnk" for="lnk">
        <p:graphicImage id="primeLogo" value="/images/prime_logo.png" />
    </p:tooltip>

</h:panelGrid>