14 Replies Latest reply on Aug 13, 2009 1:56 PM by The Empi

    tooltip for a message

    giuseppe naddeo Newbie

      Hi everybody.


      I'm having a problem with a tooltip nested into a rich:message component.


      I have 2 input box email1 and email2 and on key up event, I check that inputs are equal.


      In case of error a message is added to the context so a gif is showed but the tooltip never appears.


      what is wrong with my code?


      the page:



      <h:outputLabel id="labForEma1" for="email1">E-mail</h:outputLabel>
      
      <h:inputText id="email1" value="#{userform.email1}" immediate="true">
           <a:support event="onkeyup" actionListener="#{userform.changeEmail}"/>
      </h:inputText>
      
      
      <h:outputLabel id="labForEma2" for="email2">Ridigita e-mail</h:outputLabel>
      
      <h:inputText id="email2" value="#{userform.email2}" immediate="true">
           <a:support event="onkeyup" actionListener="#{userform.changeEmail}"/>
      </h:inputText>     
                                                        
      <rich:message id="msg-email1" for="email1" showDetail="false">
           <f:facet id="facet-email1" name="errorMarker">
                <h:graphicImage id="img-email1" url="../icons/cancel.gif"/>
           </f:facet>
      </rich:message>
      <rich:toolTip id="tool-email1" for="img-email1">
           <rich:message id="tooltext-email1" for="email1" showSummary="true" />
      </rich:toolTip>
      



      the action listener:




      public void changeEmail(){
      
           if (email1 == null)
                email1 = "";
           if (email2 == null)
                email2 = "";
           if (!email1.equals(email2)) {
                System.out.println("qui2!");
                FacesContext.getCurrentInstance().addMessage("user_form:email1",new FacesMessage(FacesMessage.SEVERITY_ERROR, "sommario2", "dettaglio2"));
           }
      }
      



      any help is really appreciated.
      thanks

        • 1. Re: tooltip for a message
          Nikos Paraskevopoulos Novice

          Hello,


          I took a quick look at the <rich:message> and it does provide a tooltip attribute... Maybe it is what you need.


          Richfaces version: 3.3.0


          If your version of Richfaces doesnt have this attribute, or you cannot upgrade, you could try embedding the tooltip inside the image, like:


          <rich:message id="msg-email1" for="email1" showDetail="false">
               <f:facet id="facet-email1" name="errorMarker">
                    <h:graphicImage id="img-email1" url="../icons/cancel.gif">
                         <rich:toolTip id="tool-email1" for="img-email1">
                         ...WHAT IS THE VALUE???
                         </rich:toolTip>
                    </h:graphicImage>
               </f:facet>
          </rich:message>
          



          Determining the value of the tooltip in this case is trickier. I cannot tell if the message components (both plain and rich ones) operate correctly when enclosed in the tooltip.


          Last, there is allways the hardcore way: Implementing your own javax.faces.render.Renderer for the <h:message> or <rich:message> components. Renderers are not difficult to implement. And there is also the Richfaces CDK (though I have never used it).

          • 2. Re: tooltip for a message
            giuseppe naddeo Newbie

            Hello,


            the tooltip attribute does not work either. I really don't know why.


            I'll try your second suggestion. even if I have a doubt: ..what is the value..?!?!
            I used rich:message with showDetail false to have just a gif. and showDetail true to have the tooltip with some text.

            as you suggest, I sould nest 2 rich:message.


            or is there another way?


            as regard the hardcore way, I would like to spend some other time before implementing another render.


            did you tried to implement my example? I can send you my code.


            thanks.



            • 3. Re: tooltip for a message
              giuseppe naddeo Newbie

              giuseppe naddeo wrote on Jun 30, 2009 14:43:


              Hello,

              the tooltip attribute does not work either. I really don't know why.

              I'll try your second suggestion. even if I have a doubt: ..what is the value..?!?!
              I used rich:message with showDetail false to have just a gif. and showDetail true to have the tooltip with some text.

              as you suggest, I sould nest 2 rich:message.

              or is there another way?

              as regard the hardcore way, I would like to spend some other time before implementing another render.

              did you try to implement my example? I can send you my code.

              thanks.





              Click HELP for text formatting instructions. Then edit this text and check the preview.

              • 4. Re: tooltip for a message
                Nikos Paraskevopoulos Novice

                Hi,


                I haven't tried your use case, I am only speculating. What I have tried is attaching a <rich:tooltip> to a <h:graphicImage>, outside any message tag and it did work.


                I took a look at the <rich:message> renderer (org.richfaces.renderkit.html.HtmlRichMessageRenderer). It is quite simple. It renders the tooltip as the HTML title attribute. This means that the tooltip of <rich:message> can only contain plain text! The value that is displayed is the summary of the message, if the component is configured to show both summary and detail, and the tooltip flag is true. So the correct setup should be:


                <rich:message
                  id="msg-email1"
                  for="email1"
                  showDetail="true"
                  showSummary="true"
                  tooltip="true"
                >
                  <f:facet id="facet-email1" name="errorMarker">
                    <h:graphicImage id="img-email1" url="../icons/cancel.gif"/>
                  </f:facet>
                </rich:message>
                <!-- no rich:tooltip after this -->
                



                Again, this is only speculation.


                Finally, seeing the simplicity of the <rich:message> renderer, I bet that the hardcore solution is not so hardcore after all.

                • 5. Re: tooltip for a message
                  giuseppe naddeo Newbie

                  I tried your solution. it does not work. I mean it shows a gif and the detail part of error message but no tooltip.


                  I think you are right when you say that the renderer is simple, but as principle I don't want start re-writing a component just because I cannot understand it.
                  and btw why is


                  tooltip = true



                  not working?


                  also because it's just the beginning part of the project. I could loose the development control.


                  any other suggestion?


                  thanks


                  see you
                  g.

                  • 6. Re: tooltip for a message
                    giuseppe naddeo Newbie

                    just one note:


                    checking the html code produced by page, I see that the tooltip is there but with 'display:none;'


                    if I disable it, the tooltip appears. but then is always on.


                    see you
                    g.

                    • 7. Re: tooltip for a message
                      Nikos Paraskevopoulos Novice

                      Hello again,


                      This intrigued me, so I gave it a try. You are right, the tooltip doesn't show, when an errorMarker facet is configured. It is because only when the errorMarker facet is NOT specified, does the <rich:message> renderer render the image and the title.


                      I did come up with a solution though:


                      <rich:message
                        id="msg-email1"
                        for="email1"
                        showDetail="true"
                        showSummary="true"
                        tooltip="true"
                        errorLabelClass="YOUR_CLASS"
                      />
                      



                      And in theme.css (or wherever your styles are) something like:


                      .YOUR_CLASS {
                        background-image: url(../icons/cancel.gif);
                        background-repeat: no-repeat;
                        padding-left: 20px;
                      }
                      



                      Notes:

                      (1) The background image url is relative to the stylesheet - I keep forgetting this one :(

                      (2) padding-left should leave enough space for the image width+spacing from text

                      (3) In my dummy project, the bottom of the image was cropped; some additional CSS magic will probably do the trick here


                      Overall this solution is better than loading the server with yet another, irrelevant component (the <h:graphicImage>).

                      • 8. Re: tooltip for a message
                        giuseppe naddeo Newbie

                        Great!
                        You are right. Now it does work.


                        I wonder where did you find the indication that the facet excludes the tooltip.


                        You helped me and a lot of other users, I think.


                        How can I thank you? Is there a way of rating your posts?


                        g.

                        • 9. Re: tooltip for a message
                          Nikos Paraskevopoulos Novice

                          giuseppe naddeo wrote on Jul 01, 2009 10:26:


                          Great!
                          You are right. Now it does work.

                          I wonder where did you find the indication that the facet excludes the tooltip.

                          You helped me and a lot of other users, I think.

                          How can I thank you? Is there a way of rating your posts?

                          g.


                          My pleasure (I have been helped myself many times from people in the Internet, so I consider it sort of an obligation to help whenever I can; besides I too have learned from this)


                          I found the indication by experimenting and looking at the source code... Standard procedure :)


                          Yes, posts can be rated by the thread creator.

                          • 10. Re: tooltip for a message
                            giuseppe naddeo Newbie

                            just a note to close (?) this thread.


                            Nikos's suggestion works on richfaces 3.1.4.GA


                            where rich:message tag produces


                            <span id="user_form:msg-email1" class="rich-message">
                            <span class="rich-message-label YOUR_CLASS" title="Summary-test"/>
                            </span>




                            on richfaces 3.2.2.SR1 and on richfaces 3.3.1.GA it does NOT work


                            producing the following html:


                            <span id="user_form:j_id17" class="rich-message YOUR_CLASS">
                            <span class="rich-message-label"/>
                            </span>



                            (title is missing)


                            I know it's just a tooltip... but hey guys it's just a tooltip. it should work.



                            • 11. Re: tooltip for a message
                              Chris Simons Expert

                              I know it's just a tooltip... but hey guys it's just a tooltip. it should work.

                              I wholeheartedly agree.  Just to add my two cents - since I have been watching this thread and have found it somewhat humurous - I gave up on the RF ToolTip a long time ago after realizing that it never worked the way it should (and looked terrible to boot).


                              Instead I've been using the Prototip2 library, which can create beautiful, flexible tooltips.  Look it up.

                              • 12. Re: tooltip for a message
                                giuseppe naddeo Newbie

                                Hi Chris,


                                can you post any help to integrate prototip2 and seam?


                                thanks in advance.


                                g.

                                • 13. Re: tooltip for a message
                                  giuseppe naddeo Newbie

                                  I did it!!!


                                  :D


                                  <rich:message id="msg-email1" for="email1" showDetail="false">
                                       <f:facet id="facet-email1" name="errorMarker">
                                            <h:graphicImage 
                                                 id="img-email1" 
                                                 url="icons/cancel.gif" 
                                                 onmouseover="#{rich:component('tooltipId')}.show(event);"
                                                 onmouseout="#{rich:component('tooltipId')}.hide(event);" />
                                       </f:facet>
                                  </rich:message>     
                                  
                                  <a:form>
                                  <rich:toolTip id="tooltipId" attached="false">
                                  <rich:message id="tooltext-email1" for="email1" showDetail="true" />
                                  </rich:toolTip>
                                  </a:form>



                                  I'm writing this last post hoping it can help you not to go crazy as I did.


                                  I close saying that I did not understand why tooltip does not work in any other way.


                                  see you
                                  g.

                                  • 14. Re: tooltip for a message
                                    The Empi Newbie

                                    @giuseppe: thank you, excelent solution!


                                    I wrapped it into a custom facelet tag, so it can be used like this:

                                    <rs:errormessage for="inputfield" />



                                    <ui:composition>
                                    
                                         <rich:message for="${field}" showDetail="false" showSummary="false">
                                              <f:facet name="errorMarker">
                                                   <h:graphicImage value="/img/icon/exclamation.png"
                                                        onmouseover="#{rich:component('${field}_tooltip')}.show(event);"
                                                        onmouseout="#{rich:component('${field}_tooltip')}.hide(event);" />
                                              </f:facet>
                                         </rich:message>
                                         <rich:toolTip>
                                              <rich:message id="${field}_tooltip" for="${field}" showDetail="false" showSummary="true" />
                                         </rich:toolTip>
                                    </ui:composition>