PrimeFaces Extensions Showcase

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 InputText:
Tooltip on OutputLink:	Link to something
Tooltip with content:	PrimeFaces Extensions

Source

XHTML page


<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>

Use Cases

Documentation pe:tooltip

Attributes (move mouse over the names to see data types)

Name	Description
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 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 is 0.
atPosition	The corner of the target element to position the tooltips corner at.Default is bottom right.
autoShow	This flag enables showing tooltips automatically after page loading. Auto shown tooltips can not be global or shared.Default is false.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
converter	EL expression resolves to a converter instance or literal converter ID defining a component converter.
fixed	When set to true, the tooltip will not hide if moused over, allowing the contents to be clicked and interacted with.Default is false.
for	Id of the component to attach the tooltip.
global	A global tooltip converts each title attribute to a tooltip.Default is false.
header	Header or Titlebar of the tooltip. Not applicable on global tooltips.
hideDelay	Delay time for hiding the tooltip.Default is 0.
hideEffect	Hide effect function.Default is fadeOut.
hideEffectLength	Duration for hide effect.Default is 500.
hideEvent	Event hiding the tooltip.Default is mouseleave.
id	Unique identifier of the component in a namingContainer.Default is generated.
mouseTracking	This flag enables tooltip's positioning in relation to the mouse.Default is false.
myPosition	The corner of the tooltip to position in relation to the target element.Default is top left.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
shared	A shared tooltip - one tooltip, multiple targets.Default is false.
showDelay	Delay time for displaying the tooltip.Default is 0.
showEffect	Show effect function.Default is fadeIn.
showEffectLength	Duration for show effect.Default is 500.
showEvent	Event displaying the tooltip.Default is mouseenter.
styleClass	Style class of the tooltip will override ThemeRoller theme.
value	Value of the component.
widgetVar	Name of the client side widget.