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>