Tooltip has various customization options such as effects, positioning, events and custom content support.
DocumentationFocus/Blur: | ||
Position: | Top | There are 4 options for position |
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 |
<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="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>