9 Replies Latest reply on Jul 16, 2015 1:49 AM by kk n

    <rich:tooltip> content is not loading in tooltip

    kk n Newbie

      Hi,

       

      I have a simple generic tooltip for various components on page. The content of tooltip is being set using using javascript.

       

      <h:graphicImage

             id="${componentId}${_IMAGE}"

             value="${ERROR_IMAGE}"

             style="border: none; vertical-align: top; display: none;"

             rendered="${isRendered}"

        >

            <rich:tooltip

                  id="${componentId}${_MESSAGE}"

                  value=""

                  event="mouseover"

                  direction="topRight"

                  style="color: black; font-weight: bold; font-size: 8pt;"

             />

        </h:graphicImage>

       

      The tooltip shows up on mouse hover but the content does not show up. I kept monitoring the firebug console and found that a span with id componentId + ":wrp" is dynamically appended. But the span ":content" is not holding the tooltip content.

       

      When hard coding the content inside the <richLtooltip> tag, I am able to see the content.

       

      Not sure what am I missing Can anyone help me how the tooltip is used in richfaces 4?

       

      Thanks!!

        • 1. Re: <rich:tooltip> content is not loading in tooltip
          Michal Petrov Master

          Well it's hard to tell why your content generation isn't working when you don't show how you are doing it. Have you debugged the JavaScript?

          • 2. Re: <rich:tooltip> content is not loading in tooltip
            kk n Newbie

            Hi,

             

            Thanks for the reply!

             

            I have a simple section like below

            <table>

              <tr">

              <td class="twentyPercent headerfont verticalAlignNormal">

              Select Type

              <span class="redfont">*</span>

              <span class="">

              <f:subview id="type${SubView}">

              <ui:decorate template="/templates/Warning.xhtml">

              <ui:param name="isRendered" value="#{true}" />

              <ui:param name="componentId" value="type" />

              </ui:decorate>

              </f:subview>

              </span>

              </td>

              </tr>

            </table>

             

            Now, the Warning.xhtml has a tooltip code (as mentioned in my previous post) which is generic for all the components on page.

             

            On page submit, I am validating each component and if there is any error, I am setting the tooltip value. While inspecting the element, I can see the value being updated. However, on hover over, a dynamic component (with id COMPONENT_ID:wrp) has been appended at the end of the html code which has no value and hence I am not able to see the tooltip content. After the dynamic content is appended and I am trying to set its value through firebug, I am able to see the content. So, there is something with that dynamic (:wrp) element but I am not to understand.

             

            Thanks!

            • 3. Re: <rich:tooltip> content is not loading in tooltip
              kk n Newbie

              Hi, I am not sure if I have explained the issue and the code properly Can you please help in understanding what am I missing here? or help with new tooltip implementation.

               

              Thanks!

              • 4. Re: <rich:tooltip> content is not loading in tooltip
                Michal Petrov Master

                I do not understand what you're trying to do, the tooltip you've shown is not bound to any variable, so I don't know where do you expect the content to come from.

                • 5. Re: <rich:tooltip> content is not loading in tooltip
                  kk n Newbie

                  Sorry for making it too complicated.

                   

                  I have a UI component as below -

                  <table>

                         <tr id="ypeRow">

                              <td>

                                   Select the Type

                                   <span>

                                        <f:subview id="typeView">

                                             <ui:decorate template="/templates/Validation.xhtml">

                                                  <ui:param name="isRendered" value="#{true}" />

                                                  <ui:param name="componentId" value="type" />

                                             </ui:decorate>

                                        </f:subview>

                                   </span>

                              </td>

                               <td> <h:inputText /> // as an example

                         </tr>

                  </table>


                  Validation.xhtml has below code -


                  <span>

                       <h:graphicImage

                              id="${componentId}_error"

                              value="${ERROR_IMAGE}"

                              style="border: none; vertical-align: top; display: none;"

                              rendered="${isRendered}"

                         >

                              <rich:tooltip

                                   id="${componentId}_error_message"

                                   value=""

                                   for=""

                                   event="mouseover"

                                   direction="topRight"

                                   style="color: black; font-weight: bold; font-size: 8pt;" render="${componentId}_error_message"

                              ></rich:tooltip>

                         </h:graphicImage>

                  </span>

                   

                  In javascript, on page submit, I am validating the inputText component. If there is any validation error, I am showing an exclamation image (using h:graphicImage) after the "Select the Type" text using subView . On hover over the image, the validation error message should come.

                   

                  Now how am I setting this error message? In javascript, while validating the component, I am dynamically setting the error message for tooltip using dynamic id ${componentId}_error_message id of tooltip.

                   

                  Can you please help in figuring out if there is an implementation issue or provide an example of how do I set value for a tooltip (which is common across all components on page) dynamically?

                   

                  Thanks!

                  Khush

                  • 6. Re: <rich:tooltip> content is not loading in tooltip
                    Michal Petrov Master

                    Why not put an rich:message in the tooltip to begin with? (Although an error message should be visible by default). Alternatively you can put a span into the tooltip and manage that, instead of the whole tooltip. (The id points just to the parent element, the tooltip itself is the id:wrp).

                    • 7. Re: <rich:tooltip> content is not loading in tooltip
                      kk n Newbie

                      Hello,

                       

                      Thank you for the reply. You are awesome!

                       

                      I did some progress in this. I am able to set the validation message dynamically (can see in firebug console) However, the tooltip is still not showing up on hover over Display is still none.

                       

                      Below the updated code

                       

                      <span>

                           <h:graphicImage

                                  id="${componentId}_error"

                                  value="${ERROR_IMAGE}"

                                  style="border: none; vertical-align: top; display: none;"

                                  rendered="${isRendered}"

                             >

                                  <rich:tooltip

                                       target="${componentId}_error_message"

                                       value=""

                                       for=""

                                       event="mouseover"

                                       direction="topRight"

                                       style="color: black; font-weight: bold; font-size: 8pt;" render="${componentId}_error_message"

                                  >

                                          <rich:message id="${componentId}_error_message" for="${componentId}_error_message" />

                                </rich:tooltip>

                             </h:graphicImage>

                      </span>

                       

                      After making this change, I could see in firebug as below

                       

                      <span id="TypeValidationWarning">

                           <span id="form:typeView:j_id_1u_9" style="display: none;">

                       

                       

                                <span id="form:typeView:j_id_1u_9:wrp" class="rf-tt" style="z-index:3;color: black; font-weight: bold; font-size: 8pt;">

                       

                       

                                     <span id="form:typeView:j_id_1u_9:cntr" class="rf-tt-cntr">

                       

                       

                                          <span id="form:typeView:j_id_1u_9:content" class="rf-tt-cnt">

                       

                       

                                               <span id="form:typeView:type_error_message" class="rf-msg ">Type is mandatory.</span>

                       

                                          </span>

                                     </span>

                                </span>

                          </span>


                      Is there anything else that I am doing wrong?


                      Thanks!

                      Khush

                      • 8. Re: <rich:tooltip> content is not loading in tooltip
                        Michal Petrov Master

                        You set the tooltip target to the message inside the tooltip, that can't work. If you nest the tooltip in a component you don't have to specify a target, it will bind to the parent.

                        • 9. Re: <rich:tooltip> content is not loading in tooltip
                          kk n Newbie

                          Yep.. You are right.

                           

                          Made the changes and it worked perfect! Thank you so much!!