	Language
	English
	English
	English
	French
	German
	German
	German
	Italian
	Korean
	Spanish
	Catalan
	Dutch
	Portuguese
	Portuguese
	Arabic
	Arabic
	Bulgarian
	Bangla
	Bosnian
	Czech
	Greek
	Estonian
	Persian
	Finnish
	Danish
	Hindi
	Indonesian
	Icelandic
	Croatian
	Japanese
	Hungarian
	Hebrew
	Georgian
	Central Kurdish
	Khmer
	Kyrgyz
	Kazakh
	Lithuanian
	Latvian
	Malay
	Norwegian
	Polish
	Romanian
	Russian
	Slovak
	Slovenian
	Serbian
	Serbian
	Swedish
	Thai
	Turkish
	Ukrainian
	Uzbek
	Vietnamese
	Chinese
	Chinese

Tooltip Tooltip Global

Global tooltip binds to clickable elements with title attributes. Ajax updates are supported as well, meaning if target component is updated with ajax, tooltip can still bind.

Tooltip Tag Documentation

Tooltip goes beyond the legacy html title attribute by providing custom effects, events, html content and advance theme support.

Name	Type	Required	Default	Description
id	String	false	generated	Unique identifier of the component in a namingContainer.
rendered	boolean	false	true	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	UIComponent	false	generated	An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar	String	false	generated ('widget_' + componentClientId)	Name of the client side widget.
at	String	false		Defines which position on the target element to align the positioned element against: "horizontal vertical" alignment. See the my option for full details on possible values. Percentage offsets are relative to the target element. If set overrides the 'position' attribute. Example "right center".
autoHide	boolean	false	true	Whether to hide tooltip when hovering over tooltip content.
beforeShow	String	false		Client side callback to execute before tooltip is shown. Returning false will prevent display.
converter	Converter	false		EL expression resolves to a converter instance or literal converter ID defining a component converter.
delegate	boolean	false	false	When enabled, event delegation is used for better performance.
escape	boolean	false	true	Defines whether html would be escaped or not.]
for	String	false		Id of the component to attach the tooltip.
globalSelector	String	false	a,:input,:button	jquery selector for global tooltip.
hideDelay	int	false	0	Delay time to hide tooltip in milliseconds.
hideEffect	String	false	fade	Effect to be used for hiding
hideEvent	String	false	mouseout	Event hiding the tooltip.
my	String	false		Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. A single value such as "right" will be normalized to "right center", "top" will be normalized to "center top" (following CSS convention). Acceptable horizontal values: "left", "center", "right". Acceptable vertical values: "top", "center", "bottom". Example: "left top" or "center center". Each dimension can also contain offsets, in pixels or percent, e.g., "right+10 top-25%". Percentage offsets are relative to the element being positioned. If set overrides the 'position' attribute. Example "left center".
onHide	String	false		Client side callback to execute after tooltip is hidden.
onShow	String	false		Client side callback to execute after tooltip is shown.
position	String	false	right	Position of the tooltip, valid values are right, left, top and bottom.
showDelay	int	false	150	Delay time to show tooltip in milliseconds.
showEffect	String	false	fade	Effect to be used for displaying.
showEvent	String	false	mouseover	Event displaying the tooltip.
style	String	false		Inline style of the component.
styleClass	String	false		Style class of the component.
trackMouse	boolean	false	false	Tooltip position follows pointer on mousemover.
value	Object	false		Value of the component.

Name	Description
No records found.

Name	Type	Default	Description
No records found.

Name	Library	Target
components.css	primefaces
jquery/jquery.js	primefaces
core.js	primefaces
components.js	primefaces

Family org.primefaces.component

Type org.primefaces.component.Tooltip

Class org.primefaces.component.tooltip.Tooltip

Renderer Type org.primefaces.component.TooltipRenderer

Renderer Class org.primefaces.component.tooltip.TooltipRenderer

RESOURCES

Tag Documentation Documentation Documentation JSDoc

ON THIS PAGE

Options Global

Usage


<div class="card">
    <p:tooltip/>

    <h:form>
        <h:panelGroup layout="block" styleClass="formgrid grid">
            <div class="field col-12 md:col-4 p-fluid">
                <p:outputLabel for="@next" value="Input"/>
                <p:inputText pt:data-tooltip="Tooltip for an input"/>
            </div>
            <div class="field col-12 md:col-4">
                <span class="block mb-2">Link</span>
                <h:outputLink value="#" pt:data-tooltip="Tooltip for a link">
                    <h:outputText value="About"/>
                </h:outputLink>
            </div>
            <div class="field col-12 md:col-4">
                <span class="block mb-2">Button</span>
                <p:commandButton value="Update" pt:data-tooltip="Update components" update="@parent"/>
            </div>
        </h:panelGroup>
    </h:form>
</div>

Tooltip Tooltip Global

Tooltip Tag Documentation

Usage

Reloading page