Theme
arya
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga
vela
Tooltip
Tooltip has various customization options such as positioning, delay, effects and events.
Source

<h:panelGrid id="details" columns="2" columnClasses="formColumn1,formColumn2">
    <h:outputLabel value="Focus / Blur: "/>
    <h:panelGroup layout="block" style="padding: 0 0 3px 0;">
        <p:inputText id="focus" title="This tooltip is displayed when input gets the focus"/>
        <pe:tooltip for="focus" showEvent="focus" hideEvent="blur" styleClass="qtip-default"/>
    </h:panelGroup>

    <h:outputText value="Styled "/>
    <h:panelGroup layout="block" style="padding: 3px 0 3px 0;">
        <h:outputLink id="styled" value="#">
            <h:outputText value="Styled with custom header"/>
        </h:outputLink>
        <pe:tooltip for="styled" value="Override style by using styleClass" header="Style Override" styleClass="qtip qtip-green qtip-rounded qtip-shadow"/>
    </h:panelGroup>
    
    <h:outputText value="Fade: "/>
    <h:panelGroup layout="block" style="padding: 3px 0 3px 0;">
        <h:outputLink id="fade" value="#">
            <h:outputText value="Fade Effect"/>
        </h:outputLink>
        <pe:tooltip for="fade" value="Fade effect is used by default" header="Fade" showEffect="fadeIn" hideEffect="fadeIn"/>
    </h:panelGroup>

    <h:outputText value="Position: "/>
    <h:panelGroup layout="block" style="padding: 3px 0 3px 0;">
        <h:outputLink id="pos" value="#">
            <h:outputText value="Position (top, right)"/>
        </h:outputLink>
        <pe:tooltip for="pos" value="This tooltip positioned at top right" myPosition="top, right" header="Position"/>
    </h:panelGroup>

    <h:outputText value="Slide: "/>
    <h:panelGroup layout="block" style="padding: 3px 0 3px 0;">
        <h:outputLink id="slide" value="#">
            <h:outputText value="Slide Effect with custom position"/>
        </h:outputLink>
        <pe:tooltip for="slide" value="This tooltip uses slide effect for the animation" showEffect="slideToggle"
                    hideEffect="slideToggle" showDelay="0" myPosition="left center" atPosition="right center" header="Slide"/>
    </h:panelGroup>

    <h:outputText value="Content: "/>
    <h:panelGroup layout="block" style="padding: 3px 0 3px 0;">
        <h:outputLink id="lnk" value="#">
            <h:outputText value="PrimeFaces Extensions"/>
        </h:outputLink>
        <pe:tooltip for="lnk">
            <p:graphicImage value="/resources/images/logo.png"/>
        </pe:tooltip>
    </h:panelGroup>
</h:panelGrid>
            
Components and more
Documentation pe:tooltip
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a namingContainer.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding An EL expression referring to a server side UIComponent instance in a backing bean.
value Value of the component than can be either an EL expression of a literal text.
converter An EL expression or a literal text that defines a converter for the component.
widgetVar Name of the client side widget.
global A global tooltip converts each title attribute to a tooltip. Default value is false.
shared A shared tooltip - one tooltip, multiple targets. Default value is false.
autoShow This flag enables showing tooltips automatically after page loading. Auto shown tooltips can not be global or shared. Default value is false.
mouseTracking This flag enables tooltip's positioning in relation to the mouse. Default value is false.
fixed When set to true, the tooltip will not hide if moused over, allowing the contents to be clicked and interacted with. Default value is false.
styleClass Style class of the tooltip will override ThemeRoller theme. Default value is null.
header Header or Titlebar of the tooltip. Not applicable on global tooltips. Default value is null.
adjustX A positive or negative pixel value by which to offset the tooltip in the horizontal plane (x-axis). Negative values cause a reduction in the value (moves tooltip to the left). Default value is 0.
adjustY A positive or negative pixel value by which to offset the tooltip in the vertical plane (y-axis). Negative values cause a reduction in the value (moves tooltip upwards). Default value is 0.
atPosition The corner of the target element to position the tooltips corner at. Default value is 'bottom right'.
myPosition The corner of the tooltip to position in relation to the target element. Default value is 'top left'.
showEvent Event displaying the tooltip. Default value is mouseenter.
showDelay Delay time for displaying the tooltip. Default value is 0.
showEffect Effect to be used for displaying. Default value is fadeIn.
showEffectLength Time in milliseconds to display the effect. Default value is 500.
hideEvent Event hiding the tooltip. Default value is mouseleave.
hideDelay Delay time for hiding the tooltip. Default value is 0.
hideEffect Effect to be used for hiding. Default value is fadeOut.
hideEffectLength Time in milliseconds to process the hide effect. Default value is 500.
for Id of the component to attach the tooltip.
PrimeFaces Extensions Showcase - © 2011-2023,PrimeFaces: 14.0.5,PrimeFaces Extensions: 14.0.5,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: jetty/9.4.36.v20210114,Build time: 2024-09-10 21:01