Search code examples
cssrichfacestooltip

rich:tooltip set background color


Version :

RichFaces 4.3.5

Apache MyFaces 2.1

Issue :

We are migrating from rich faces 3 to 4. The issue is , I am not able to set back ground colour for rich:tooltip component

Setting styleClass="tooltip-text" for tooltip component is not working. It seems that .rf-tt-cnt built in style needs to be set with background-color. But how will this built-in style be applied to below structure ?

Setting styleClass="tooltip-text rf-tt-cnt" doesn't seem to work. Please help.

Code :

<h:panelGroup>
            <h:outputText id="statusId" style="cursor:hand; color:#0000F0; text-decoration:underline;" value="#{val.statusValue}" />
            <rich:tooltip target="statusId" styleClass="tooltip-text" showEvent="click" direction="bottomLeft"  followMouse="false" layout="block" >
                    <h:panelGrid columns="1">
                        <h:panelGroup>
                            <h:outputLabel value="Detail Status " rendered="#{bean.statusDescr}" />                             
                        </h:panelGroup>
                    </h:panelGrid>
            </rich:tooltip>
    </h:panelGroup>


     .tooltip-text{
         background-color:orange;
      }

Solution

  • For setup background color in tooltip you can redefine RichFaces class. Add following code on your page (or set it in proper CSS file):

    <h:outputStylesheet>
        .rf-tt-cntr {
            background-color: red;
        }
    </h:outputStylesheet>