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

Question

J'essaie de remplacer l'étiquette du message d'erreur par défaut par un div au lieu d'une étiquette. J'ai regardé ce poste et je sais comment le faire, mais mes limites avec CSS me hantent. Comment puis-je l'afficher comme certains de ces exemples ?

Exemple #1 (Dojo) - Il faut taper une entrée invalide pour que l'erreur s'affiche
Exemple n° 2

Voici un exemple de code qui remplace l'étiquette d'erreur par un élément div.

$(document).ready(function(){
            $("#myForm").validate({
                rules: {
                    "elem.1": {
                        required: true,
                        digits: true
                    },
                    "elem.2": {
                        required: true
                    }
                },
                errorElement: "div"
            });                  
        });

Maintenant, je suis un peu perdu sur la partie css mais voilà :

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;  
    }

UPDATE :

Ok, j'utilise ce code maintenant mais l'image et le placement sur le popup est plus grand que la bordure, est-ce que cela peut être ajusté pour être dynamique en hauteur ?

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));
}

le css est le même que ci-dessous (votre code css)

Html

<span>
<input type="radio" class="checkbox" value="P" id="radio_P" name="radio_group_name"/>
<label for="radio_P">P</label>
<input type="radio" class="checkbox" value="S" id="radio_S" name="radio_group_name"/>
<label for="radio_S">S</label>
</span>

Answer 1

Ajoutez le code css suivant à votre méthode .validate pour modifier le code css ou la fonctionnalité.

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

Answer 2

Si vous pouviez expliquer pourquoi vous devez remplacer l'étiquette par un div, cela nous aiderait certainement...

Aussi, pourriez-vous coller un échantillon qui serait utile ( http://dpaste.com/ o http://pastebin.com/ )