<rich:tooltip> content is not loading in tooltip

[kkn]

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!!

[michpetrov]

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?

[kkn]

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!

[kkn]

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!

[michpetrov]

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.

[kkn]

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

[michpetrov]

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).

[kkn]

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

[michpetrov]

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.

[kkn]

Yep.. You are right.

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