ToolTip is a small non-modal pop-up that could be used to display additional information, that is usually hidden.
Major toolTip features:

• Tool-tip content may be pre-rendered on a page (client mode) or loaded on separate Ajax request (ajax mode)
• In "ajax" mode default content could be shown while request is executed
• Parameters can be passed to the server during an ajax request
• Tooltip look is fully customizable using both - Richfaces skins and CSS style classes

ToolTip example

Here you can see default client-side tool-tip This tool-tip content was pre-rendered to the page. The look of this tool-tip is 100% defined by skin.	This tool-tip will follow mouse. Also this tool-tip has a delay 0.5 sec, so be patient! This tool-tip content also pre-rendered to the page. However, the look of this tool-tip is customized by styleClass attribute.
This tool-tip rendered on server in separate request. Wait...	This tool-tip will be activated on mouse click. It also has a bottom-left position. Wait...

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

    <style>
        .tooltip {
            background-color:#{richSkin.generalBackgroundColor};
            border-width:3px;
            padding:10px;
        }
        .tooltip-text {
            width:350px;
            height:80px;
            cursor:arrow;
            border-width:2px;
            text-align:center;
            display: table-cell;
            vertical-align: middle; 
        }
        .tooltipData {
            font-weight: bold;
        }
    </style>
    
    <h:panelGrid columns="2">
    <rich:panel id="sample1" styleClass="tooltip-text" bodyClass="rich-laguna-panel-no-header">
        <p>
            Here you can see <b>default client-side</b> tool-tip
        </p>
        <rich:toolTip>
            <span style="white-space:nowrap">
                This tool-tip content was <strong>pre-rendered</strong> to the page.<br/>
                The look of this tool-tip is 100% defined by skin.
            </span>
        </rich:toolTip>
    </rich:panel>
    <rich:panel id="sample2" styleClass="tooltip-text" bodyClass="rich-laguna-panel-no-header">
        <p>
            This tool-tip will <b>follow mouse</b>. Also this tool-tip has a <b>delay 0.5 sec</b>,
             so be patient!
        </p>
        <rich:toolTip followMouse="true" direction="top-right" showDelay="500" styleClass="tooltip">
            <span  style="white-space:nowrap">
                This tool-tip content also <strong>pre-rendered</strong> to the page.<br/>
                However, the look of this tool-tip is customized<br/>
                by styleClass attribute.
            </span>
        </rich:toolTip>
    </rich:panel>
    <h:form>
    <rich:panel  id="sample3" styleClass="tooltip-text" bodyClass="rich-laguna-panel-no-header">
        <p>
            This tool-tip rendered on server <b>in separate request</b>.
        </p>
        <rich:toolTip direction="top-right" mode="ajax" styleClass="tooltip" layout="block">
            <f:facet name="defaultContent">
                <strong>Wait...</strong>
            </f:facet>
            <span   style="white-space:nowrap">This tool-tip content was <strong>rendered on 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> 
    </h:form>
    <h:form>
    <rich:panel  id="sample4" styleClass="tooltip-text" bodyClass="rich-laguna-panel-no-header">
        <p>
            This tool-tip will be <b>activated on mouse click</b>. It also has a <b>bottom-left</b> position.
        </p>
        <rich:toolTip showEvent="onclick" direction="bottom-left" mode="ajax" styleClass="tooltip" layout="block">
            <f:facet name="defaultContent">
                <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>

<<Hide Source