8 Replies Latest reply on Nov 21, 2011 3:19 AM by yinbr

    richfaces 4 rich:message as icon with tooltip

    Frederic Gerber Newbie

      In Richfaces 3 we used this facelet composition to display a message as icon with a tooltip for the message text

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
          xmlns:ui="http://java.sun.com/jsf/facelets"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:rich="http://richfaces.org/rich">
      
          <rich:message id="${id}" for="${for}" showDetail="false" showSummary="false"
                  tooltip="true">
                  <f:facet name="errorMarker">
                      <h:graphicImage id="${id}-error-img"
                          value="icons/error.gif">
                          <rich:toolTip for="${id}-error-img" followMouse="false">
                              <rich:message for="${for}" showDetail="true" />
                          </rich:toolTip>
                      </h:graphicImage>
                  </f:facet>
                  <f:facet name="warnMarker">
                      <h:graphicImage id="${id}-warning-img"
                          value="icons/warning.png">
                          <rich:toolTip for="${id}-warning-img" followMouse="false">
                              <rich:message for="${for}" showDetail="true" />
                          </rich:toolTip>
                      </h:graphicImage>
                  </f:facet>
                  <f:facet name="infoMarker">
                      <h:graphicImage id="${id}-info-img"
                          value="icons/info.png">
                          <rich:toolTip for="${id}-info-img" followMouse="false">
                              <rich:message for="${for}" showDetail="true" />
                          </rich:toolTip>
                      </h:graphicImage>
                  </f:facet>
              </rich:message>
      
      </ui:composition>
      

       

      Does anyone knows something similar that works for Richfaces 4?

        • 1. richfaces 4 rich:message as icon with tooltip
          Ilya Shaikovsky Master

          please check my description there https://issues.jboss.org/browse/RFPL-1123 . It's still not updated at online documentation(commited only today) but that's how that should be done now.

          1 of 1 people found this helpful
          • 2. richfaces 4 rich:message as icon with tooltip
            Frederic Gerber Newbie

            Thank you for the fast reply.

            With your description it is easy to display the icon, but what about the message body as tooltip?

            I would like to display the message as tooltip on mouse over. Did I miss something in your description?

            • 3. richfaces 4 rich:message as icon with tooltip
              Ilya Shaikovsky Master

              footerClass of the table applied only to table footer. and column footerClass applied to cells of the column.

               

              But for bulk re-definition rf-* classes - still preferrable.

              • 4. richfaces 4 rich:message as icon with tooltip
                Frederic Gerber Newbie

                I'm sorry, but I don't understand your answer. Maybe this picture expains better what I would like to do.

                message_example.gif

                If an error occours I would like to mark the input field with an icon. If the user puts the mouse over the icon the error message should appear as tooltip.

                • 5. Re: richfaces 4 rich:message as icon with tooltip
                  Frederic Gerber Newbie

                  With this piece of XML I can show a tooltip with the message when the user puts the mouse over the first message

                   

                  <a4j:commandLink disabled="true">

                      <rich:message for="#{cc.attrs.forId}" styleClass="message-icon"

                          onmouseover="#{rich:component('tooltip')}.show(event);" />

                      <rich:tooltip id="tooltip">

                          <rich:message for="#{cc.attrs.forId}" styleClass="message-text" />

                      </rich:tooltip>

                  </a4j:commandLink>

                   

                  Now I tried to format the first message with CSS so that only the icon is shown. But any changes at the CSS modifies both messages.

                   

                  <style type="text/css">

                      .rf-msg-err { display: inline; visibility: visible; }

                      .rf-msg-det { display: none; visibility: hidden; }

                  </style>

                   

                  I can define the styleClass attribut for the whole message element, but not for the rf-msg-err and rf-msg-det.

                  • 6. Re: richfaces 4 rich:message as icon with tooltip
                    Frederic Gerber Newbie

                    After some CSS researches my component looks like this

                     

                    <composite:implementation>

                        <style type="text/css">

                            .message-icon .rf-msg-err {

                                display: inline;

                                visibility: visible;

                            }

                            .message-icon .rf-msg-det {

                                display: none;

                                visibility: hidden;

                            }

                        </style>

                       

                        <a4j:commandLink disabled="true">

                            <rich:message for="#{cc.attrs.forId}" styleClass="message-icon"

                                onmouseover="#{rich:component('tooltip')}.show(event);" />

                            <rich:tooltip id="tooltip">

                                <rich:message for="#{cc.attrs.forId}" styleClass="message-text" />

                            </rich:tooltip>

                        </a4j:commandLink>

                    </composite:implementation>

                    • 7. richfaces 4 rich:message as icon with tooltip
                      Ilya Shaikovsky Master

                      sorry for the delay and great to hear that it's solved.

                      • 8. Re: richfaces 4 rich:message as icon with tooltip
                        yinbr Newbie

                        HI

                        going back to the first example in richfaces 3 i used

                        <rich:message id="${id}" for="${for}" showDetail="false" showSummary="false"
                                    tooltip="true">

                                    <f:facet name="errorMarker">
                                        <div>

                                                           <script>

                                                                alert('some Javascript');

                                                           </script>

                                        </div>
                                    </f:facet>

                         

                        How can i do it now in richfaces 4

                        Thanks