Theme
arya
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga
vela
Tooltip
The autoShow feature enables showing tooltips automatically after page loading. All tooltips below are shown directly after the page has been loaded. Position of an auto shown tooltip is adjusted automatically when the window is resized. It's also possible to use widget's method "reposition()" to adjust tooltip's position. Test it by pressing the button "Reposition" when scrolling the center layout pane.
Tooltip on OutputLink:
Tooltip with content:
Source

<h:panelGrid id="details" columns="2" columnClasses="formColumn1,formColumn2">
    <f:facet name="header">
        <h:panelGroup layout="block" style="text-align:left;margin-bottom:10px;">
            <p:commandButton value="Hide" type="button"
                             onclick="PF('tip1').hide();PF('tip2').hide();PF('tip3').hide();PF('tip4').hide()"/>
            <p:commandButton value="Show" type="button"
                             onclick="PF('tip1').show();PF('tip2').show();PF('tip3').show();PF('tip4').show()"/>
            <p:commandButton value="Reposition" type="button"
                             onclick="PF('tip1').reposition();PF('tip2').reposition();PF('tip3').reposition();PF('tip4').reposition()"/>            
            <p:commandButton value="Destroy" type="button"
                             onclick="PF('tip1').destroy();PF('tip2').destroy();PF('tip3').destroy();PF('tip4').destroy()">
                <pe:tooltip value="Once destroyed, tooltip's markup doesn't exist anymore"
                            autoShow="true" widgetVar="tip4"
                            myPosition="left center" atPosition="right center"/>
            </p:commandButton>
        </h:panelGroup>
    </f:facet>
    
    <h:outputLabel value="Tooltip on InputText: "/>
    <h:panelGroup layout="block" style="padding: 0 0 3px 0;">
        <p:inputText id="txt" title="Type something into this field"/>
        <pe:tooltip for="txt" autoShow="true" widgetVar="tip1"
                    myPosition="left center" atPosition="right center"/>
    </h:panelGroup>

    <h:outputText value="Tooltip on OutputLink: "/>
    <h:panelGroup layout="block" style="padding: 3px 0 3px 0;">
        <h:outputLink id="olink" value="#">
            <h:outputText value="Link to something"/>
        </h:outputLink>
        <pe:tooltip for="olink" value="Follow this link please"
                    autoShow="true" widgetVar="tip2"
                    myPosition="left center" atPosition="right center"/>
    </h:panelGroup>

    <h:outputText value="Tooltip with content: "/>
    <h:panelGroup layout="block" style="padding: 3px 0 3px 0;">
        <h:outputLink id="olink2" value="#">
            <h:outputText value="PrimeFaces Extensions"/>
        </h:outputLink>
        <pe:tooltip for="olink2" autoShow="true" widgetVar="tip3">
            <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