jQuery override default validation error message display (Css) Popup/Tooltip like

Uso jQuery BeautyTips para lograr el pequeño efecto de burbuja del que estás hablando. Yo no uso el plugin de validación, así que realmente no puedo ayudar mucho allí, pero es muy fácil de estilo y mostrar la BeautyTips. Deberías investigarlo. No es tan simple como las reglas CSS, me temo, ya que necesita usar el elemento canvas e incluir un archivo javascript adicional para que IE juegue bien con él.

Algunas cosas:

Primero, no creo que realmente necesite un error de validación para un radio fieldset porque solo podría tener uno de los campos marcados por defecto. La mayoría de la gente preferiría corregir algo y luego proporcionar algo. Por ejemplo:

   Age: (*) 12 - 18 | () 19 - 30 | 31 - 50 

Es más probable que se cambie a la respuesta correcta, ya que la persona NO quiere que vaya a la predeterminada. Si lo ven en blanco, es más probable que piensen que" no es asunto suyo " y lo omitan.

Segundo, fui capaz de obtenga el efecto que creo que desea sin ninguna propiedad de posicionamiento. Solo tiene que añadir relleno-derecho al formulario (o el div del formulario, lo que sea) para proporcionar suficiente espacio para su error y asegurarse de que su error se ajuste en esa área. Luego, tiene una clase css preestablecida llamada "error" y la establece como que tiene un margen-top negativo aproximadamente la altura de su campo de entrada y un margen-left aproximadamente la distancia desde la izquierda hasta donde debe comenzar su relleno-right. Probé esto, no es genial, pero funciona con tres propiedades y no requiere flotadores o absolutos:

   <style type="text/css">
    .error {
        width: 13em; /* Ensures that the div won't exceed right padding of form */
        margin-top: -1.5em;  /*Moves the div up to the same level as input */
        margin-left: 11em;   /*Moves div to the right */
        font-size: .9em;     /*Makes sure that the error div is smaller than input */
    }

   <form>
   <label for="name">Name:</label><input id="name" type="textbox" />
   <div class="error"><<< This field is required!</div>
   <label for="numb">Phone:</label><input id="numb" type="textbox" />
   <div class="error"><<< This field is required!</div>
   </form>

Desafortunadamente no puedo comentar con mi reputación de novato, pero tengo una solución para el problema de que la pantalla se quede en blanco, o al menos esto es lo que funcionó para mí. En lugar de establecer la clase wrapper dentro de la función errorPlacement, establézcala inmediatamente cuando esté configurando el tipo wrapper.

$('#myForm').validate({
    errorElement: "div",
    wrapper: "div class=\"message\"",
    errorPlacement: function(error, element) {
        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() + 5);
        error.css('top', offset.top - 3);
    }

});

Asumo que hacerlo de esta manera le permite al validador saber qué elementos div eliminar, en lugar de todos ellos. Funcionó para mí, pero no estoy del todo seguro de por qué, así que si alguien podría elaborar que podría ayudar a otros un montón.

Esa respuesta realmente me ayudó, en mi caso tuve que filtrar algunos elementos y tener especial alineación en su div error,

errorPlacement:function(error,element) {
    if (element.attr("id") == "special_element") {
        // special align
    } else { // default error scheme
        error.insertAfter(element);
    }
}

Agregue el siguiente css a su.validar método para cambiar el css o funcionalidad

 errorElement: "div",
    wrapper: "div",
    errorPlacement: function(error, element) {
        offset = element.offset();
        error.insertAfter(element)
        error.css('color','red');
    }

Si pudiera proporcionar alguna razón de por qué necesita reemplazar la etiqueta con un div, eso sin duda ayudaría...

También, podría pegar una muestra de que sería útil ( http://dpaste.com/ o http://pastebin.com/)