The <rich:toolTip> component is used for creation of event-triggered non modal popup, that contains information regarding the page element, that event was applied to.

Figure 6.205.  <rich:toolTip> component

The simplest way to create the <rich:toolTip> component on a page is as following:

...

<rich:panel>

    <rich:toolTip value="Hello, I am the content of this tooltip!"/>

</rich:panel>

...

Example:

import org.richfaces.component.html.HtmlToolTip;

...

HtmltoolTip mytoolTip = new  HtmltoolTip();

...

Text information, labeled on the <rich:toolTip> , is specified with "value" attribute. Text that is put between tooltip start and end tags will also be rendered as tooltip content and could be marked with HTML tags. Images, links, buttons and other RichFaces components are also may be put and composed inside the <rich:toolTip> . The <rich:toolTip> borders are stretched automatically to enclose the contents.

There are three ways to attach the <rich:toolTip> to a page element. The first and simplest one is when the <rich:toolTip> is nested into a page element the tooltip is applied to. This way is shown on example in the Creating the Component with a Page Tag section. The "attached" attribute is "true" by default in this case, which means that the tolltip will be invoked automatically when the mouse cursor is hovered above the parent component.

The second one uses <rich:toolTip> "for" attribute. In this case the <rich:toolTip> is defined separately from a component it is applied to.

Example:

<rich:panel id="panelId">

...

</rich:panel>

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

These two ways are also applicable for HTML elements that are not presented in components tree built by facelets. Use "for" attribute to attach the <rich:toolTip> in both cases.

Example:

<!-- The <rich:toolTip> is nested into the parent HTML element -->

<div id="para1">

      <p>This paragraph and tooltip are nested into the same <div> element.</p>

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

</div>



<!-- The <rich:toolTip> is defined separately -->

<div id="para2">

      <p>The tooltip for this paragraph is defined separately.</p>

</div>

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

The third way to invoke the <rich:toolTip> uses JS API function. List of JS API functions available for <rich:toolTip> is listed below. JS API functions are defined for a component the <rich:toolTip> is applied to. The <rich:toolTip> "attached" attribute should be set to "false" in this case.

Example:

<rich:panel id="panelId" onclick="#{rich:component("tooltipId")}.show(event);" />

<a4j:form>

      <rich:toolTip id="tooltipId" attached="false" value="This is a tooltip."/>

</a4j:form>

The "mode" attribute is provided you to control the way of data loading to <rich:toolTip> . The component works properly in client and Ajax modes. In client mode <rich:toolTip> content is rendered once on the server and could be rerendered only via external submit. In Ajax mode <rich:toolTip> content is requested from server for every activation. For Ajax mode there is possibility to define a facet "defaultContent" , which provides default <rich:toolTip> content to be displayed, while main content is loading into the <rich:toolTip> (see the example below).

Example:

...

<h:commandLink value="Simple Link" id="link">

    <rich:toolTip followMouse="true" direction="top-right" mode="ajax" value="#{bean.toolTipContent}" horizontalOffset="5" 

        verticalOffset="5" layout="block">

        <f:facet name="defaultContent">

            <f:verbatim>DEFAULT TOOLTIP CONTENT</f:verbatim>

        </f:facet>

    </rich:toolTip>

</h:commandLink>

...

This is the result:

Figure 6.206.  <rich:toolTip> component with default content

Figure 6.207.  <rich:toolTip> component with loaded content

For skinnability implementation, the components use a style class redefinition method. Default style classes are mapped on skin parameters.

There are two ways to redefine the appearance of all <rich:toolTip> components at once:

In order to redefine styles for all <rich:toolTip> components on a page using CSS, it's enough to create classes with the same names (possible classes could be found in the table above) and define necessary properties in them. An example is placed below:

Example:

...

.rich-tool-tip{

    background-color: #eef2f8;

    border-color: #7196c8;

}

...

This is a result:

Figure 6.208. Redefinition styles with predefined classes

...

.myClass{

     font-style: italic;

}

...

<rich:toolTip ... styleClass="myClass"/>

Figure 6.209. Redefinition styles with own classes and styleClass attributes

On the component LiveDemo page you can see the example of <rich:toolTip> usage and sources for the given example.