RichFaces rich:tooltip

RichFaces Rich Tooltip with features, configuration, architecture, a4j:log, a4j:ajax, a4j:commandlink, a4j:outputpanel,rich:autocomplete, rich:fileupload, rich:list, rich:panel, rich:datascroller, rich:dropdownmenu, rich:messages, rich:progressbar, rich:tooltip etc.

RichFaces rich:tooltip

RichFaces rich:tooltip

This component provides an informational tool-tip. We can attach tool-tip any control and is displayed when hovering the mouse cursor over the control.

We need to use values attribute for tool-tip text and is usually shown when the mouse cursor hovers.

Style classes and skin parameters

The following tables contains the style classes and corresponding skin parameters for the tooltip.

Class Function Skin Parameters Mapped CSS properties
.rf-tt It is used to define styles for the tool-tip itself. No skin parameters.  
.rf-tt-loading It is used to define styles for the tool-tip when it is loading. No skin parameters.  
.rf-tt-cnt It is used to define styles for the tool-tip content. No skin parameters.  
.rf-tt-cntr It is used to define styles for the progressed portion of the progress bar. tipBorderColor generalFamilyFont generalSizeFont border-color font-family font-size

Example

Here, in the following example, we are implementing <rich:tooltip> component. This example contains the following files.

JSF file

// tool-tip.xhtml

  1. <ui:composition xmlns="http://www.w3.org/1999/xhtml"  
  2. xmlns:h="http://java.sun.com/jsf/html"  
  3. xmlns:a4j="http://richfaces.org/a4j"  
  4. xmlns:rich="http://richfaces.org/rich"  
  5. xmlns:f="http://java.sun.com/jsf/core"  
  6. xmlns:ui="http://java.sun.com/jsf/facelets">  
  7. <f:view>  
  8. <h:head>  
  9. <title>ToolTip </title>  
  10. </h:head>  
  11. <h:body>  
  12. <h:form>  
  13. <h:outputText value="User Name " />  
  14. <h:inputText label="user name"  
  15. id="user-name"  
  16. required="true"  
  17. value="#{user.name}">  
  18. <f:validateLength minimum="5" maximum="20" />  
  19. </h:inputText><br/><br/>  
  20. <h:commandButton value="submit"/>  
  21. <rich:tooltip value="Please Enter User Name " target="user-name"/>  
  22. </h:form>  
  23. </h:body>  
  24. </f:view>  
  25. </ui:composition>  

ManagedBean

// User.java

  1. import javax.faces.bean.ManagedBean;  
  2. import javax.faces.bean.RequestScoped;  
  3. @ManagedBean  
  4. @RequestScoped  
  5. public class User {  
  6. String name;  
  7. public String getName() {  
  8. return name;  
  9. }  
  10. public void setName(String name) {  
  11. this.name = name;  
  12. }  
  13.