⁠15.9. <rich:tooltip>

The <rich:tooltip> component provides an informational tool-tip. The tool-tip can be attached to any control and is displayed when hovering the mouse cursor over the control.
⁠
<rich:tooltip>

Figure 15.9. <rich:tooltip>

⁠15.9.1. Basic usage

For basic usage, define the tool-tip text using the value attribute. The <rich:tooltip> component is then automatically attached to the parent element, and is usually shown when the mouse cursor hovers.
Alternatively, the content of the tool-tip can be defined inside the <rich:tooltip> tags, and the value attribute is not used. This allows HTML tags to be used to define the content, and provides for rich content such as images, links, buttons, and other RichFaces components.
⁠

Example 15.11. Defining tool-tip content

Basic content
​<rich:panel>
​    <rich:tooltip value="This is a tool-tip."/>
​</rich:panel>
Rich content
​<rich:panel>
​    <rich:tooltip>
​        This is a <b>tool-tip</b>.
​    </rich:tooltip>
​</rich:panel>

⁠15.9.2. Attaching the tool-tip to another component

If not otherwise specified, the tool-tip is attached to the parent element in which it is defined. The target attribute is used to attach the tool-tip to another component, pointing to the target component's id identifier. This allows the <rich:tooltip> component to be specified outside the target element. This approach is demonstrated in Example 15.12, “Attaching the tool-tip”.
⁠

Example 15.12. Attaching the tool-tip

​<rich:panel id="panelId">
​...
​</rich:panel>
​
​<rich:tooltip value="This is a tool-tip." target="panelId"/>
The <rich:tooltip> component can alternatively be left unattached, and is instead invoked through an event handler on the target component. To leave the <rich:tooltip> component unattached, set attached="false", and define the event handler to trigger the tool-tip on the target component. This approach is demonstrated in Example 15.13, “Unattached tool-tips”. When leaving the <rich:tooltip> component unattached, ensure it has an id identifier defined. If it is defined outside the target element, it must be nested in an <h:form> component.
⁠

Example 15.13. Unattached tool-tips

​<rich:panel id="panelId" onclick="#{rich:component('tooltipId')}.show(event);" />
​
​<h:form>
​    <rich:tooltip id="toolTipId" attached="false" value="This is a tool-tip."/>
​</h:form>

⁠15.9.3. Appearance

By default, the <rich:tooltip> component is positioned intelligently based on the position of the mouse cursor. Use the jointPoint attribute to specify a corner of the target component at which to display the tool-tip instead, and use the direction attribute to specify the direction the tool-tip will appear relative to that corner. Possible values for both attributes are: auto, autoLeft, autoRight, bottomAuto, bottomLeft, bottomRight, topAuto, topLeft, topRight. Use the horizontalOffset and verticalOffset attributes to specify the horizontal offset and vertical offset at which to display the tool-tip.
Use the showEvent attribute to specify when the tool-tip is shown. By default it appears when the attached component is hovered-over with the mouse. Use the hideEvent attribute to specify when the tool-tip is hidden. The default value is none, so the tool-tip remains shown. However, it can be linked to an event on the target component, such as the mouseout event.
Set followMouse="true" to cause the tool-tip to follow the user's mouse movements.
Advanced appearance features are demonstrated in Example 15.14, “Advanced tool-tip usage”.

⁠15.9.4. Update mode

The mode for updating the tool-tip is determined by the mode attribute, which can have one of the following values:
ajax
The tool-tip content is requested from the server with every activation.
client
The tool-tip content is rendered once on the server. An external submit causes the content to re-render.
When using mode="ajax", define the loading facet. The tool-tip displays the content of the loading facet while loading the actual content from the server.
⁠

Example 15.14. Advanced tool-tip usage

​<h:commandLink value="Simple Link" id="link">
​    <rich:tooltip followMouse="true" direction="topRight" mode="ajax" value="#{bean.toolTipContent}"
​                  horizontalOffset="5" verticalOffset="5" layout="block">
​        <f:facet name="loading">
​            <f:verbatim>Loading...</f:verbatim>
​        </f:facet>
​    </rich:tooltip>
​</h:commandLink>

⁠15.9.5. <rich:tooltip> client-side events

The <rich:tooltip> component supports the following client-side events:
click
This event is activated when the tool-tip is clicked with the mouse.
dblclick
This event is activated when the tool-tip is double-clicked with the mouse.
mouseout
This event is activated when the mouse cursor leaves the tool-tip.
mousemove
This event is activated when the mouse cursor moves over the tool-tip.
mouseover
This event is activated when the mouse cursor hovers over the tool-tip.
show
This event is activated when the tool-tip is shown.
complete
This event is activated when the tool-tip is completed.
hide
This event is activated when the tool-tip is hidden.

⁠15.9.6. JavaScript API

The <rich:tooltip> component can be controlled through the JavaScript API. The JavaScript API provides the following functions:
show(event)
Show the tool-tip.
hide()
Hide the tool-tip.

⁠15.9.7. Reference data

  • component-type: org.richfaces.Tooltip
  • component-class: org.richfaces.component.UITooltip
  • component-family: org.richfaces.Tooltip
  • renderer-type: org.richfaces.TooltipRenderer

⁠15.9.8. Style classes and skin parameters

⁠

Table 15.7. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties
.rf-tt
This class defines styles for the tool-tip itself.
No skin parameters.
.rf-tt-loading
This class defines styles for the tool-tip when it is loading.
No skin parameters.
.rf-tt-cnt
This class defines styles for the tool-tip content.
No skin parameters.
.rf-tt-cntr
This class defines styles for the progressed portion of the progress bar.
tipBorderColor
border-color
generalFamilyFont
font-family
generalSizeFont
font-size