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

    richfaces 4 rich:message as icon with tooltip

    freger
    freger Apr 4, 2011 11:23 AM

      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
          ilya_shaikovsky Apr 5, 2011 4:55 AM (in response to freger)

          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
            • Actions
          • 2. richfaces 4 rich:message as icon with tooltip
            freger
            freger Apr 5, 2011 9:56 AM (in response to ilya_shaikovsky)

            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?

              • Actions
            • 3. richfaces 4 rich:message as icon with tooltip
              ilya_shaikovsky
              ilya_shaikovsky Apr 6, 2011 4:50 AM (in response to freger)

              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.

                • Actions
              • 4. richfaces 4 rich:message as icon with tooltip
                freger
                freger Apr 6, 2011 5:22 AM (in response to ilya_shaikovsky)

                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.

                  • Actions
                • 5. Re: richfaces 4 rich:message as icon with tooltip
                  freger
                  freger Apr 7, 2011 2:54 AM (in response to freger)

                  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.

                    • Actions
                  • 6. Re: richfaces 4 rich:message as icon with tooltip
                    freger
                    freger Apr 7, 2011 3:12 AM (in response to freger)

                    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>

                      • Actions
                    • 7. richfaces 4 rich:message as icon with tooltip
                      ilya_shaikovsky
                      ilya_shaikovsky Apr 7, 2011 9:54 AM (in response to freger)

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

                        • Actions
                      • 8. Re: richfaces 4 rich:message as icon with tooltip
                        yinbr
                        yinbr Nov 21, 2011 3:19 AM (in response to ilya_shaikovsky)

                        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

                          • Actions