4.8. ToolTips
Keywords: RichFaces

### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

## 4.8. ToolTips

When using RichFaces components library you've got nealy everything to build UI, making a tooltip is not an exception. RichFaces provides a separate component to make a bubble appeared when the user hovers a UI element or layout area. The component is <rich:toolTip>. There's nothing complicated in using <rich:toolTip>: you just need to set the text to be shown in the tooltip with the "value" attribute and specify for which component you want the tooltip to be shown with the "for" attribute that takes the id of the targeted component as a parameter.

    ...

    <rich:panel id="panelId">

    <p>Element which has a tooltip</p>

    </rich:panel>

    <rich:toolTip value="This is a tooltip." for="panelId"/>

    ...

Alternatively, you can just place <rich:toolTip> as a nested element of container for which the tooltip is shown.

    ...

    <div>

    <p>Element which has a tooltip</p>

    <rich:toolTip>

    <p>Tooltip text</p>

    </rich:toolTip>

    </div>

    ...

This approach was adopted in the Photo Alum to display tooltips for

This code outputs an album's image.

    ...

    <a4j:mediaOutput id="img" element="img" styleClass="main-image"

        createContent="#{imageLoader.paintImage}" style="border : 3px solid #808080;"

        value="#{fileManager.transformPath(model.selectedImage.fullPath, '_medium')}">

    </rich:dragSupport>

        <rich:toolTip followMouse="true" direction="top-right"

            showDelay="500" styleClass="tooltip" rendered="#{model.selectedImage.showMetaInfo}">

            <span style="white-space:nowrap; display:block; text-align:left;">

                <h:outputText value="Size in bytes: #{model.selectedImage.size}" />

                <br />

                <h:outputText

                    value="#{messages['original_size']}: #{model.selectedImage.height}x#{model.selectedImage.width}" />

                <br />

                <h:outputText value="Captured at: #{model.selectedImage.created}" />

                <br />

                <h:outputText

                    value="#{messages['camera']}: #{model.selectedImage.cameraModel}" />

            </span>

        </rich:toolTip>

    </a4j:mediaOutput>

    ...

The <rich:toolTip> is nested in <a4j:mediaOutput> and prints the size of the image, size in pixels, when the picture was taken and the type of camera used to take the picture.

Figure 4.10. Tooltip

- Prev4.7. Context Menus
- Top of page
- Front page
- Next4.9. User Input Data Validation