Tooltip has various customization options such as effects, positioning, events and custom content support.
<div class="card">
<h5>Positions</h5>
<div class="grid ui-fluid">
<div class="col-12 md:col-3">
<p:inputText id="right" type="text" placeholder="Right" />
<p:tooltip for="right" value="Enter your username" position="right"/>
</div>
<div class="col-12 md:col-3">
<p:inputText id="top" type="text" placeholder="Top" />
<p:tooltip for="top" value="Enter your username" position="top"/>
</div>
<div class="col-12 md:col-3">
<p:inputText id="bottom" type="text" placeholder="Bottom" />
<p:tooltip for="bottom" value="Enter your username" position="bottom"/>
</div>
<div class="col-12 md:col-3">
<p:inputText id="left" type="text" placeholder="Left" />
<p:tooltip for="left" value="Enter your username" position="left"/>
</div>
</div>
<h5>Custom Position</h5>
<p:inputText id="custom" type="text" placeholder="Custom" />
<p:tooltip for="custom" value="Enter your username" my="right center" at="left center"/>
<h5>Focus and Blur</h5>
<p:inputText id="focus" title="Enter your username"/>
<p:tooltip for="focus" showEvent="focus" hideEvent="blur"/>
<h5>Track Mouse</h5>
<p:graphicImage id="track" name="/images/primefaces-logo.svg" library="showcase"/>
<p:tooltip for="track" value="Enter your username" trackMouse="true"/>
<h5>Auto Hide</h5>
<p:commandButton type="button" id="autoHideTrue" value="Auto Hide (true)" class="mr-2" />
<p:tooltip for="autoHideTrue" autoHide="true">
<p:graphicImage name="/images/primefaces-logo.svg" library="showcase"/>
</p:tooltip>
<p:commandButton type="button" id="autoHideFalse" value="Auto Hide (false)" />
<p:tooltip for="autoHideFalse" autoHide="false">
<p:graphicImage name="/images/primefaces-logo.svg" library="showcase"/>
</p:tooltip>
<h5>Animation</h5>
<p:commandButton type="button" id="animate" icon="pi pi-cog"/>
<p:tooltip for="animate" value="Customization options" showEffect="clip" hideEffect="fold" />
<h5>Content</h5>
<p:commandButton type="button" id="content" icon="pi pi-external-link"/>
<p:tooltip for="content">
<p:graphicImage name="/images/primefaces-logo.svg" library="showcase"/>
</p:tooltip>
</div>