Dynamic tooltip extended data table

[cgillam]

GOAL:  Dynamically show 1 of 3 tooltip messages on an inputText element when the user hovers if an invalid value is entered into the field.

Problem: When I type an invalid value into the inputText field the tooltip will not show up until I rerender the ExtendedDataTable.  Once I render the table I lose focus on the field and have to click into the field to continue adding value or change the value.  I would like to be able to continue typing and once i hover over the field the tooltip should show the correct message.

I have tried to render just the tooltip but I get an error: 

               Uncaught TypeError: Failed to execute 'appendChild' on Node': parameter 1 is not of type 'Node'

<script type="text/javascript">
  function highlightRow(event) {  
     var id = event.source.id.replace('input','n'); // assuming 'input' is the id of your input  
         element = RichFaces.getDomElement(id); 
     console.log(id);
     $(element).removeClass('blue')
     $(element).addClass('red''); // where red is the name of your CSS class  
  }

  </script>
  <rich:extendedDataTable id="extDataTable" styleClass="styleClass"
       var="var" columnClasses="columnClass1,columnClass2"
       rowClasses="rowClass" rowKeyVar="rowKeyvar"
       value="#{bean.records} selection="
       #{bean.selection}"  
       selectionMode="single">


  <rich:column>
       <f:facet name="header">
            <div class="div1">
                 <h:outputText value="Name" />
            </div>
       </f:facet>
       <h:panelGroup id=idNameGroup">
            <h:outputText value="#{bean.displayName}" />
       </h:panelGroup>
  </rich:column>  
          .  
          .  
          .  
  <rich:column>
       <f:facet name="header">
            <div class="div1">
                 <h:outputText value="Number Value" />
            </div>
       </f:facet>
       <a4j:outputPanel layout="block">
            <h:inputText id="NewValue" maxlength="7"
                 onkeypress="return event.keyCode!=13;"
                 style="width:50px; height:12px;"
                 value="#bean.currentValue[var.id]}">
                 <f:converter converterId="numericConverter" />
                 <a4j:ajax event="keyup" limitRender="true"
                           listener="#{bean.actionModifyRecord(var.id, 'NewValue')}"
                           oncomplete="highlightRow(event)" />
            </h:inputText>
            <rich:tooltip id="errorToolTip" mode="ajax" target="NewValue"
                      showDelay="0" rendered="#{bean.isError(var.id)}" styleClass="red">
                      <h:outputText id="errorMessage" rendered="#{bean.isError(var.id)}"
                                value="#{bean.error[var.id]}" />
            </rich:tooltip>
       </a4j:outputPanel>
  </rich:column>

[michpetrov]

Why not simply show "Everything's OK" when there is no error? Having the tooltip work only under certain conditions doesn't seem like a good design.

[cgillam]

What I needed to do is render the tooltip for all of the fields.  (So no rendered attribute) Then create a javascript method that is called with the onbeforeshow attribute to remove my css if there was no error message to display.  If there was an error then I need to add the css and hide the element.  The css needs to be added and removed from the wrp part of the rich:tooltip.  Then I needed to hide 2 layers in the rich:tooltip.  You need to hide the wrp and the cntr.

function dynamicTooltip(event, isError){

     var id = event.target.id;

     wrp = document.getElementById(id+":wrp");

     cntr = document.getElementById(id+":cntr");

     if(isError){

          $(wrp).addClass('sytle_red');

     }else{

          $(wrp).removeClass('style_red');

          $(wrp).hide();

          $(cntr).hide();

     }

}

<a4j:outputPanel layout="block"> 

         <h:inputText id="NewValue" maxlength="7" 

               onkeypress="return event.keyCode!=13;" 

                 style="width:50px; height:12px;" 

                 value="#bean.currentValue[var.id]}"> 

                 <f:converter converterId="numericConverter" /> 

                 <a4j:ajax event="keyup" limitRender="true" 

                           listener="#{bean.actionModifyRecord(var.id, 'NewValue')}" 

                           oncomplete="highlightRow(event)" /> 

            </h:inputText> 

            <rich:tooltip id="errorToolTip" mode="ajax" target="NewValue" 

                      showDelay="0 styleClass="style_red" onbeforeshow="dynamicTooltip(event,'#{bean.isError(var.id)}"> 

                      <h:outputText id="errorMessage" value="#{bean.error[var.id]}" /> 

            </rich:tooltip> 

       </a4j:outputPanel>