Displaying tooltips using the Tooltip component

Browsers provide native support for showing tooltips using the title attribute, but it is too primitive. PrimeFaces provides a Tooltip component with enhanced features and various customization options such as effects, events and custom content support.

By default, tooltips will be displayed on the mouseover event and hides on the mouseout event. We can customize this behavior using the showEvent and hideEvent attributes:

<p:tooltip for="emailId" showEvent="focus" hideEvent="blur" value="Please enter Email Id (Ex: admin@gmail.com)"/>

We can also specify tooltip text using the title attribute on the component itself:

<p:inputText id="emailId" value="" title="Please enter Email Id (Ex: admin@gmail.com)"/>
<p:tooltip for="emailId" showEvent="focus" hideEvent="blur" />

We can apply different styles of effects while showing or hiding tooltips using the showEffect and hideEffect attributes:

<p:tooltip for="emailId" showEffect="slide" hideEffect="explode" showEvent="focus" hideEvent="blur" value="Please enter Email Id (Ex: admin@gmail.com)"/>

In addition to plain text, we can also display HTML content, images, and so on as tooltips.