RichFaces Showcase

Ajax Action

a4j:ajax

a4j:commandButton

a4j:commandLink

a4j:actionListener

a4j:jsFunction

a4j:poll

a4j:push

a4j:param

Ajax Queue

a4j:queue

a4j:attachQueue

Ajax Output/Containers

a4j:outputPanel

a4j:status

a4j:region

a4j:mediaOutput

a4j:log

Validation

Client Side Validation

rich:graphValidator

rich:message

rich:messages

rich:notify

Data Iteration

a4j:repeat

rich:dataTable

rich:extendedDataTable

rich:collapsibleSubTable

rich:dataScroller

rich:list

rich:dataGrid

Trees

rich:tree

Tree Adaptors

Output/Panels

rich:chart

rich:panel

rich:togglePanel

rich:tabPanel

rich:collapsiblePanel

rich:accordion

rich:popupPanel

rich:progressBar

rich:tooltip

Menus

rich:panelMenu

rich:toolbar

rich:contextMenu

rich:dropDownMenu

Inputs

rich:autocomplete

rich:calendar

rich:editor

rich:inputNumberSlider

rich:inputNumberSpinner

rich:inplaceInput

rich:fileUpload

Selects

rich:inplaceSelect

rich:select

rich:orderingList

rich:pickList

Drag and Drop

Miscellaneous

Standard elements skinning

rich:placeholder

RichFaces functions

rich:focus

rich:componentControl

rich:hashParam

rich:hotKey

rich:jQuery

VDL documentation
Component Reference

The rich:tooltip component creates a small non-modal pop-up that can be used to display additional information for nearly anything on the page.

Major features:

Tool-tip content may be pre-rendered on a page using client mode or loaded dynamically using separate Ajax requests via Ajax mode.
In Ajax mode default content can be shown while the request is being executed
Tool-tip's look-n-feel is fully customizable using both Richfaces skins and CSS style classes

There are various other options available such as delays, follow modes, and more that are in the example below:

Here you can see a default client-side tool-tip This tool-tip content was pre-rendered to the page. The tool-tip is also following mouse around.	This tool-tip will not follow the mouse, and has a delay of 1.5 seconds, so be patient! This tool-tip content is also pre-rendered to the page.
This tool-tip was rendered on the server using an Ajax request. Loading... This tool-tip will be activated on a mouse click, and has default content defined. Wait...

View Source

<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
    <h:outputStylesheet>
        .tooltip {
            background-color: #{ a4jSkin.generalBackgroundColor};
            border-width:3px;
        }

        .tooltip-custom-body {
            background-color: orange;
        }

        .tooltip-text {
            width: 350px;
            height: 80px;
            cursor: arrow;
            border-width: 2px;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }

        .tooltipData {
            font-weight: bold;
        }
    </h:outputStylesheet>

    <h:panelGrid columns="2">
        <rich:panel id="sample1" styleClass="tooltip-text" bodyClass="rich-laguna-panel-no-header">
            <p>
                Here you can see a <b>default client-side</b> tool-tip
            </p>
            <rich:tooltip id="tt1" styleClass="tooltip" layout="block">
                <span style="white-space: nowrap"> This tool-tip content was <strong>pre-rendered</strong> to the page.<br />
                    The tool-tip is also following mouse around.</span>
            </rich:tooltip>
        </rich:panel>
        <rich:panel id="sample2" styleClass="tooltip-text" bodyClass="rich-laguna-panel-no-header">
            <p>
                This tool-tip will not <b>follow the mouse</b>, and has a <b>delay of 1.5 seconds</b>, so be patient!
            </p>
            <rich:tooltip followMouse="false" showDelay="1500" styleClass="tooltip-custom-body" layout="block">
                <span style="white-space: nowrap"> This tool-tip content is also <strong>pre-rendered</strong> to the
                    page.<br /> </span>
            </rich:tooltip>
        </rich:panel>
        <h:form id="form">
            <rich:panel id="sample3" styleClass="tooltip-text" bodyClass="rich-laguna-panel-no-header">
                <p>This tool-tip was rendered on the server using an Ajax request.</p>
                <rich:tooltip mode="ajax" styleClass="tooltip" layout="block">
                    <span style="white-space: nowrap">This tool-tip content was <strong>rendered on the server</strong> </span>
                    <h:panelGrid columns="2">
                        <h:outputText style="white-space:nowrap" value="tooltips requested:" />
                        <h:outputText value="#{tooltipData.tooltipCounter}" styleClass="tooltipData" />
                    </h:panelGrid>
                </rich:tooltip>
            </rich:panel>
            <rich:panel id="sample4" styleClass="tooltip-text" bodyClass="rich-laguna-panel-no-header">
                <p>
                    This tool-tip will be <b>activated on a mouse click</b>, and has default content defined.
                </p>
                <rich:tooltip showEvent="click" mode="ajax" styleClass="tooltip" layout="block">
                    <f:facet name="loading">
                        <strong>Wait...</strong>
                    </f:facet>
                    <span style="white-space: nowrap">This tool-tip content was <strong>rendered on server</strong><br />
                    </span>
                    <h:panelGrid columns="2">
                        <h:outputText style="white-space:nowrap" value="tooltips requested:" />
                        <h:outputText value="#{tooltipData.tooltipCounter}" styleClass="tooltipData" />
                    </h:panelGrid>
                </rich:tooltip>
            </rich:panel>
        </h:form>
    </h:panelGrid>
</ui:composition>