Tooltip - Tooltip Options

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

Documentation Widget
Focus/Blur:
Position: Top
Custom Position: custom position
Track Mouse: Mouse Tracking
Clip/Explode: Clip/Explode Effects
Content: PrimeFaces
<style type="text/css">

</style>
<script type="text/javascript">
    //<![CDATA[

    //]]>  
</script>


<h:panelGrid columns="3" cellpadding="8">
    <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="Position: " />
    <h:outputLink id="fade" value="#">
        <h:outputText value="Top" />
    </h:outputLink>
    <p:tooltip id="toolTipFade" for="fade" value="There are 4 options for position" position="top"/>

    <h:outputText value="Custom Position: " />
    <h:outputLink id="myat" value="#">
        <h:outputText value="custom position" />
    </h:outputLink>
    <p:tooltip id="tooltipMyAt" for="myat" value="My and at allow complete control over position" my="right center" at="left center"/>
    
    <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" position="left"/>
    
    <h:outputText value="Content: " />
    <h:outputLink id="content" value="#">
        <h:outputText value="PrimeFaces" />
    </h:outputLink>
    <p:tooltip id="toolTipContent" for="content" position="bottom">
        <p:graphicImage name="/demo/images/logo-trans.png" />
    </p:tooltip>
</h:panelGrid>

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.