• Settings
    • Locale

      • Change the locale of the datepicker, schedule and client side validation messages.

      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
  • Resources
Input
Calculator ClockPicker CodeScanner Converters CreditCard DynaForm FuzzySearch InputPlace TimePicker
Editors
CodeMirror MarkdownEditor MonacoEditorUpdated SunEditorUpdated
Data
Counter GanttNew KanbanNew MasterDetail MeterGroupNew OrgChartUpdated Sheet TimeAgo Timer
Charts & Maps
EChartsNew GChart Legend OSMapNew QRCode
Panel & Layout
FluidGrid Keynote Layout SlideOut Waypoint
Overlay & Feedback
BlockUI CommandPaletteNew CookiePolicy Session Tooltip
Media
DocumentViewer ImageAreaSelect ImageRotateAndResize ImageZoom
Misc
Clipboard FileDownload Functions/Utils LightSwitch Localized MarkTextNew RemoteCommand Speedtest
Resources
Tag Library GitHub Issues Website PrimeFaces Showcase

Tooltip Auto Shown

The autoShow feature shows tooltips automatically after the page has loaded, and the widget API can hide, show, reposition or destroy them. Based on qTip2 - Pretty powerful tooltips.

Tooltip Tag Documentation

Advanced Tooltip component.

NameTypeRequiredDefaultDescription
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.
adjustX int false 0 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).
adjustY int false 0 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).
atPosition String false bottom right The corner of the target element to position the tooltips corner at.
autoShow boolean false false This flag enables showing tooltips automatically after page loading. Auto shown tooltips can not be global or shared.
converter Converter false EL expression resolves to a converter instance or literal converter ID defining a component converter.
fixed boolean false false When set to true, the tooltip will not hide if moused over, allowing the contents to be clicked and interacted with.
for String false Id of the component to attach the tooltip.
global boolean false false A global tooltip converts each title attribute to a tooltip.
header String false Header or Titlebar of the tooltip. Not applicable on global tooltips.
hideDelay int false 0 Delay time for hiding the tooltip.
hideEffect String false fadeOut Hide effect function.
hideEffectLength int false 500 Duration for hide effect.
hideEvent String false mouseleave Event hiding the tooltip.
mouseTracking boolean false false This flag enables tooltip's positioning in relation to the mouse.
myPosition String false top left The corner of the tooltip to position in relation to the target element.
shared boolean false false A shared tooltip - one tooltip, multiple targets.
showDelay int false 0 Delay time for displaying the tooltip.
showEffect String false fadeIn Show effect function.
showEffectLength int false 500 Duration for show effect.
showEvent String false mouseenter Event displaying the tooltip.
styleClass String false Style class of the tooltip will override ThemeRoller theme.
value Object false Value of the component.
RESOURCES
Tag Documentation Widget Source
ON THIS PAGE
Customized Auto Shown Global
Auto shown tooltips and widget API

All tooltips below are shown directly after page load. Their position is adjusted when the window is resized, or with the widget's reposition() method (scroll the page and press "Reposition").

Tooltip on OutputLink:
Tooltip with content:

Usage


<div class="card">
    <h5>Auto shown tooltips and widget API</h5>
    <p>All tooltips below are shown directly after page load. Their position is adjusted when the window is resized, or with the widget's <code>reposition()</code> method (scroll the page and press "Reposition").</p>
    <h:form id="formAutoShownTooltips">
        <h:panelGrid id="details" columns="2" cellpadding="4">
            <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>
    </h:form>
</div>
PrimeFaces Extensions v17.0.0-SNAPSHOT on PrimeFaces v17.0.0-SNAPSHOT | Apache MyFaces Core 4.0 - API 4.0.3