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>