The component used for creation non-modal popup that activated on some event and display some information.
Highly customizable look and feel
Different ways of data loading to toolTip
Disablement support
Table 6.460. rich : toolTip attributes
Attribute Name | Description |
---|---|
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 |
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 (top-right, top-left bottom-right, bottom-left, auto(default)) |
disabled | If false the components is rendered on the client but Js for calling disabled. |
followMouse | If 'true' tooltip should follow the mouse while it moves over the parent element |
for | Id of the target component. |
hideDelay | Delay in milliseconds before tooltip will be hidden. |
hideEvent | Event that triggers the tooltip disappearance |
horizontalOffset | Sets the horizontal offset between popup list and mouse pointer |
id | Every component may have a unique id that is automatically created if omitted |
layout | Allowed values: "inline" or "block". Block/inline mode flag. Tooltip will contain div/span elements accordingly. |
mode | controls the way of data loading to tooltip and should have following values client (default), 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. |
showEvent | Event that triggers the tooltip appearance (default = onmouseover) |
style | CSS style(s) is/are to be applied when this component is rendered |
styleClass | Corresponds to the HTML class attribute |
value | Label on the tooltip |
verticalOffset | Sets the vertical offset between popup list and mouse pointer |
zorder | The same as CSS z-index for toolTip. |
Table 6.461. 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 toolTip 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();
...
toolTip main area is a simple rectangle area with any information inside. The content may be defined via "value" attribute as text or via any nested content. When both are defined, the value is displayed as text and nested content after the text. toolTip stretches if the content more than the toolTip sizes.
There is possibility to define a facet with the name "defaultContent". This facet provides the default content to display while the main content is loaded to a page in an Ajax mode. Thus when toolTip called in an Ajax mode, it appears with the content defined in the facet and when loading is completed, the content is changed to a loaded one.
Here is an example:
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 toolTip loaded it is changed to next one:
If you define the <rich:toolTip> attached as the child to some componetns and except <rich:toolTip> there are some other components inside it is recommended to define <rich:toolTip> in code as last component.
By default, 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.
toolTip appears attached to the corner dependent on the "direction" attribute. By default it is positioned bottom-right. toolTip activation occurs after a defined event (default=mouseover) on the parent component takes into consideration the "delay" attribute (default=0) or after calling JS API function show(). toolTip deactivation occurs after mouseout event on the parent component (excepting the situation when the mouse is hovered onto the toolTip itself) or after calling JS API function hide().
It is recommended to define parent component "id" for correction of toolTip work.
The attribute "for" is used for defining the "id" of an element a toolTip should be attached to. Look at the example:
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>
...
Here, the attribute "for" of a <rich:toolTip> component is required. Without it an example doesn't work because HTML elements aren't presented in component tree built by facelets.
The "mode" attribute is provided you to control the way of data loading to toolTip. It has following values:
Client
Ajax
In a client mode, toolTip content is rendered once on the server and could be reRendered only via external submit. In an Ajax mode, toolTip content is requested from server every activation.
Disabled 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.462. 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.463. 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.464. 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.