JBoss.orgCommunity Documentation
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.
Highly customizable look and feel
Different ways of data loading to toolTip
Disablement support
Table 6.498. rich : toolTip attributes
Attribute Name | Description |
---|---|
action | MethodBinding pointing at the application action to be invoked, if this UIComponent is activated by you, during the Apply Request Values or Invoke Application phase of the request processing lifecycle, depending on the value of the immediate property |
actionListener | MethodBinding pointing at method accepting an ActionEvent with return type void |
ajaxSingle | boolean attribute which provides possibility to limit JSF tree processing(decoding, conversion/validation, value applying) to the component which sends the request only. |
attached | If the value of the "attached" attribute is "true", a component is attached to the parent component; if "false", component does not listen to activating browser events, but could be activated externally. Default value is "true" |
binding | The attribute takes a value-binding expression for a component property of a backing bean |
direction | Defines direction of the popup list to appear. Possible values are "top-right", "top-left", "bottom-right", "bottom-left", "auto". Default value is "bottom-right" |
disabled | If false the components is rendered on the client but JavaScript for calling disabled. Default value is "false" |
event | DEPRECATED. Use showEvent instead. Default value is "mouseover" |
followMouse | If "true" tooltip should follow the mouse while it moves over the parent element. Default value is "false" |
for | Id of the target component |
hideDelay | Delay in milliseconds before tooltip will be hidden. Default value is "0" |
hideEvent | Event that triggers the tooltip disappearance. Default value is "none" (so, the component does not disappears) |
horizontalOffset | Sets the horizontal offset between pop-up list and mouse pointer. Default value is "10" |
id | Every component may have a unique id that is automatically created if omitted |
immediate | True means, that the default ActionListener should be executed immediately (i.e. during Apply Request Values phase of the request processing lifecycle), rather than waiting until the Invoke Application phase |
layout | Block/inline mode flag. Possible value are: "inline" or "block". Default value is "inline". Tooltip will contain div/span elements respectively |
mode | Controls the way of data loading to a tooltip. May have following values: "client" (default) and "ajax" |
onclick | HTML: a script expression; a pointer button is clicked |
oncomplete | JavaScript code for call after the tooltip shown |
ondblclick | HTML: a script expression; a pointer button is double-clicked |
onhide | JavaScript code for call after the tooltip hidden |
onkeydown | HTML: a script expression; a key is pressed down |
onkeypress | HTML: a script expression; a key is pressed and released |
onkeyup | HTML: a script expression; a key is released |
onmousedown | HTML: script expression; a pointer button is pressed down |
onmousemove | HTML: a script expression; a pointer is moved within |
onmouseout | HTML: a script expression; a pointer is moved away |
onmouseover | HTML: a script expression; a pointer is moved onto |
onmouseup | HTML: script expression; a pointer button is released |
onshow | JavaScript code for call after the tooltip called (some element overed) but before its requesting |
rendered | If "false", this component is not rendered |
showDelay | Delay in milliseconds before tooltip will be displayed. Default value is "0" |
showEvent | Event that triggers the tooltip. Default value is "onmouseover" |
style | CSS style(s) is/are to be applied when this component is rendered |
styleClass | Corresponds to the HTML class attribute |
value | The current value for this component |
verticalOffset | Sets the vertical offset between pop-up list and mouse pointer. Default value is "10" |
zorder | The same as CSS z-index for toolTip. Default value is "99" |
Table 6.499. Component identification parameters
Name | Value |
---|---|
component-type | org.richfaces.component.toolTip |
component-class | org.richfaces.component.html.HtmltoolTip |
component-family | org.richfaces.component.toolTip |
renderer-type | org.richfaces.renderkit.html.toolTipRenderer |
tag-class | org.richfaces.taglib.HtmltoolTipTag |
To create the simplest variant of <rich:toolTip> component on a page, use the following syntax:
Example:
...
<rich:panel>
<rich:toolTip value="toolTip content"/>
</rich:panel>
...
Example:
import org.richfaces.component.html.HtmltoolTip;
...
HtmltoolTip mytoolTip = new HtmltoolTip();
...
To specify text information, labeled on a <rich:toolTip> , use "value" attribute. Images, links, buttons and other RichFaces components also may be put and composed inside <rich:toolTip> . Text, specified between tooltip's start and end tags will be rendered in browser as simple text. <rich:toolTip> borders stretch to enclose it contents.
There are three ways to attach a <rich:toolTip> to a page element. One of them uses nesting (this way is shown on example above). In such cases <rich:toolTip> is attached to the parent component by default.
It is recommended to specify "id" for parent page element to ensure tooltip's correct work.
If parent component contains more than one child, it is recommended to define <rich:toolTip> as the last one.
<rich:toolTip> may be attached to a page element by the use of "for" attribute. In this case a <rich:toolTip> may be defined separately from a page element it is applied to. "id" for page element is necessary (see the example below).
Example:
...
<rich:panel id="panelId">
...
</rich:panel>
<rich:toolTip value="This is a tooltip content" for="panelId"/>
...
Because HTML elements are not presented in components tree built by facelets, use the attribute "for" with HTML elements as shown in example below.
Example:
...
<div id="elementId">
<rich:toolTip for="elementId">Using a toolTip</rich:toolTip>
<p>The first simple example</p>
</div>
...
<div id="elementId">
<p>The second simple example</p>
</div>
<rich:toolTip for="elementId">Using a toolTip</rich:toolTip>
...
<rich:toolTip> may also be invoked by JS API function. List of JS API functions available for <rich:toolTip> is listed below. JS API functions are defined for a page element, the <rich:toolTip> is applied to. Thus, <rich:toolTip> can be defined separately from that page element. It is necessary to specify "ids" for both and set <rich:toolTip> "attached" attribute's value to "false" (see the example below).
...
<rich:panel id="paneld" onclick="#{rich:component("tooltipId")}.show();">
...
</rich:panel>
<rich:toolTip id="tooltipId" attached="false" value="This is a tooltip content"/>
...
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:
And after <rich:toolTip> loaded it is changed to next one:
<rich:toolTip>
appears attached to the corner
dependent on the
"direction"
attribute.
By default it is positioned bottom-right.
<rich:toolTip>
activation occurs after an event,
defined on the parent component, takes into consideration the "delay" attribute
or after calling JS API function show()
.
"hideEvent"
attribute defines the way
how
<rich:toolTip>
disappears.
It default value is "none", so the
<rich:toolTip>
does not disappears.
Deactivation may be set for example on
mouseout
event on the parent component
(excepting the situation when the mouse is hovered onto the
<rich:toolTip>
itself)
or after calling JS API function hide()
.
By default, <rich:toolTip> appears smart positioned. But as you can see from the previous example, you can define an appearance direction via the corresponding attribute "direction" . And also it's possible to define vertical and horizontal offsets relatively to a mouse position.
Disabled
<rich:toolTip>
is rendered to a page as usual but JS that responds for its activation is disabled until enable()
is called.
Moreover, to add some JavaScript effects, client events defined on it are used:
Standart:
"onclick"
"ondblclick"
"onmouseout"
"onmousemove"
"onmouseover"
Special:
"onshow" - Called after the tooltip is called (some element hovered) but before its request
"oncomplete" - Called just after the tooltip is shown
"onhide" - Called after the tooltip is hidden
Table 6.500. JavaScript API
Function | Description |
---|---|
show() | Shows the corresponding toolTip |
hide() | Hides the corresponding toolTip |
enable() | Enables the corresponding toolTip |
disable() | Disables the corresponding toolTip |
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:
Redefine the corresponding skin parameters
Add to your style sheets style classes used by a <rich:toolTip> component
Table 6.501. Skin parameters redefinition for a component
Skin parameters | CSS properties |
---|---|
tipBackgroundColor | background-color |
tipBorderColor | border-color |
generalSizeFont | font-size |
generalFamilyFont | font-family |
generalFontColor | color |
Table 6.502. Classes names that define a component appearance
Class name | Description |
---|---|
rich-tool-tip | Defines styles for a wrapper <span> or <div> element of a toolTip |
It depends on <rich:toolTip> layout what a wrapper element <span> or <div> to choose.
In order to redefine styles for all <rich:toolTipl> 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:
In the example a tool tip background color, border color and font style were changed.
Also it's possible to change styles of particular <rich:toolTipl> component. In this case you should create own style classes and use them in corresponding <rich:toolTip> styleClass attributes. An example is placed below:
Example:
...
.myClass{
font-style: italic;
}
...
The "styleClass" attribute for <rich:toolTip> is defined as it's shown in the example below:
Example:
<rich:toolTip ... styleClass="myClass"/>
This is a result:
As it could be seen on the picture above, background color and border color of tool tip were changed.
Here you can see the example of <rich:toolTip> usage and sources for the given example.