title: qTip2 validation does not disappear when input becomes valid
body: <p>I am trying to display ASP.net MVC client-side validation error messages in the form of <a href="http://craigsworks.com/projects/qtip2/" rel="nofollow">qTips</a> by changing the <code>onError</code> function in <code>jquery.validation.unobstrusive.js</code> similar to how it is done <a href="http://nickstips.wordpress.com/2011/08/18/asp-net-mvc-displaying-client-and-server-side-validation-using-qtip-tooltips/" rel="nofollow">here</a>.</p>
  
  <pre class="lang-js prettyprint-override"><code>function onError(error, inputElement) {  // 'this' is the form element        
      var container = $(this).find("[data-valmsg-for='" + inputElement[0].name + "']"),
      replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;
  
      // Remove the following line so the default validation messages are not displayed        
      // container.removeClass("field-validation-valid").addClass("field-validation-error");
  
      error.data("unobtrusiveContainer", container);
  
      if (replace) {
          container.empty();
          error.removeClass("input-validation-error").appendTo(container);
      }
      else {
          error.hide();
      }
  
      /**** Added code to display the error message in a qTip tooltip ****/        
      // Set positioning based on the elements position in the form
      var elem = $(inputElement),
          corners = ['left center', 'right center'],
          flipIt = elem.parents('span.right').length &gt; 0;
  
      // Check we have a valid error message
      if (!error.is(':empty')) {
          // Apply the tooltip only if it isn't valid
          elem.filter(':not(.valid)').qtip({
              overwrite: false,
              content: error,
              position: {
                  my: corners[flipIt ? 0 : 1],
                  at: corners[flipIt ? 1 : 0],
                  viewport: $(window)
              },                
              show: {
                  event: false,
                  ready: true
              },
              hide: false,
              style: {
                  classes: 'qtip-red' // Make it red... the classic error colour!
              }
          })
  
          // If we have a tooltip on this element already, just update its content
          .qtip('option', 'content.text', error);
      }
  
      // If the error is empty, remove the qTip
      else { elem.qtip('destroy'); }
  }
  </code></pre>
  
  <p>My model:</p>
  
  <pre class="lang-cs prettyprint-override"><code>public class Model
  {
      [DataType(DataType.Currency)]
      [Range(typeof(decimal), "0", "79228162514264337593543950335")]
      public decimal Amount { get; set; }
      // bunch of other properties
  }
  </code></pre>
  
  <p>Everything works fine and the errors (e.g. The Amount field is required) are displayed in qTips. However when I change my input to a valid value, the qTip does not disappear. Here are the exact steps:</p>
  
  <ol>
  <li>Input an invalid value for the <code>Amount</code> field</li>
  <li>qTip appears with the correct error message when input focus is lost</li>
  <li>Update the input with a valid value</li>
  <li>qTip did not close</li>
  </ol>
  
  <p>From Chrome Developers Tool, I pinpointed the problem to this line of code: <code>if (!error.is(':empty')</code>. This condition returns true even if a valid input is provided.</p>
  
  <p>The <code>error</code> variable:</p>
  
  <pre class="lang-js prettyprint-override"><code>[&lt;span for=​"Amount" class&gt;​&lt;/span&gt;​]
  </code></pre>
  
  <p>I wonder why the above condition returns true even though the <code>span</code> is empty? I want the qTip to close automatically when the input becomes valid.</p>