title: jQuery override default validation error message display (Css) Popup/Tooltip like
body: <p>I'm trying to over ride the default error message label with a div instead of a label. I have looked at <a href="https://stackoverflow.com/questions/309574/jquery-validation-how-to-not-display-errors-or-how-to-display-errors-as-a-toolt">this post</a> as well and get how to do it but my limitations with CSS are haunting me. How can I display this like some of these examples:</p>
  
  <p><a href="http://www.dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/form-validation-specialized-input/textbox-validating-currency-number" rel="nofollow noreferrer">Example #1 (Dojo)</a> - Must type invalid input to see error display<br />
  <a href="http://www.scriptiny.com/2008/04/dynamic-inline-javascript-form-validation/" rel="nofollow noreferrer">Example #2</a></p>
  
  <p>Here is some example code that overrides the error label to a div element</p>
  
  <pre><code>$(document).ready(function(){
              $("#myForm").validate({
                  rules: {
                      "elem.1": {
                          required: true,
                          digits: true
                      },
                      "elem.2": {
                          required: true
                      }
                  },
                  errorElement: "div"
              });                  
          });
  </code></pre>
  
  <p>Now I'm at a loss on the css part but here it is:</p>
  
  <pre><code>div.error {
          position:absolute;
          margin-top:-21px;
       margin-left:150px;
       border:2px solid #C0C097;
          background-color:#fff;
          color:white;
          padding:3px;
          text-align:left;
          z-index:1;
          color:#333333;
       font:100% arial,helvetica,clean,sans-serif;
       font-size:15px;
       font-weight:bold;  
      }
  </code></pre>
  
  <p>UPDATE:</p>
  
  <p>Okay I'm using this code now but the image and the placement on the popup is larger than the border, can this be adjusted to be dynamic is height?</p>
  
  <pre><code>if (element.attr('type') == 'radio' || element.attr('type') == 'checkbox') {
     element = element.parent();
  
     offset = element.offset();
     error.insertBefore(element)
     error.addClass('message');  // add a class to the wrapper
     error.css('position', 'absolute');
     error.css('left', offset.left + element.outerWidth());
     error.css('top', offset.top - (element.height() / 2)); // Not working for Radio, displays towards the bottom of the element. also need to test with checkbox
  } else {
     // Error placement for single elements
     offset = element.offset();
     error.insertBefore(element)
     error.addClass('message');  // add a class to the wrapper
     error.css('position', 'absolute');
     error.css('left', offset.left + element.outerWidth());
     error.css('top', offset.top - (element.height() / 2));
  }
  </code></pre>
  
  <p>the css is the same as below (your css code)</p>
  
  <p>Html</p>
  
  <pre><code>&lt;span&gt;
  &lt;input type="radio" class="checkbox" value="P" id="radio_P" name="radio_group_name"/&gt;
  &lt;label for="radio_P"&gt;P&lt;/label&gt;
  &lt;input type="radio" class="checkbox" value="S" id="radio_S" name="radio_group_name"/&gt;
  &lt;label for="radio_S"&gt;S&lt;/label&gt;
  &lt;/span&gt;
  </code></pre>