jquery tooltip to display validator messages

One way for doing this (without tooltip plugin) is with some off css code and some of imagination:

$("#frmArticle").validate({
    submitHandler: function(form) {
        form.submit();
    },
    onfocusout: function(element) {
        //To remove the 'checked' class on the error wrapper
        var $errorContainer = $(element).siblings(".Ntooltip").find("label");
        $errorContainer.removeClass("checked");
        if ( !this.checkable(element)) {
            this.element(element);
        }
    },
    rules: {
        name: {
            required: true
        }
    },
    errorPlacement: function(error, element) {
        var container = $('<div />');
        container.addClass('Ntooltip');  // add a class to the wrapper
        error.insertAfter(element);
        error.wrap(container);
        $("<div class='errorImage'></div>").insertAfter(error);
    },
    success: function(element) {
        $(element).addClass("checked");
    }
});

Instead of only a label for errors i create this html for errors:

<div class="Ntooltip">
   <label for="nombre" generated="true" class="error">Requerido</label>
   <div class="errorImage"></div>
</div>

With css code we are going to hide this labels to the user. But the errorImage is always visible (when the element is created, of course). And, when the user hover over it, the label will show:

div.Ntooltip {
position: relative !important; /* es la posición normal */
display: inline-block;
top: -0.2em;
left: 0.2em;
}

div.Ntooltip:hover {
    z-index:1005; /* va a estar por encima de todo */
}

div.Ntooltip label {
    display: none !important; /* el elemento va a estar oculto */
    vertical-align: middle;
}

div.Ntooltip:hover label.error:not(.checked) {
    display: inline-block !important; /* se fuerza a mostrar el bloque */
    position: absolute; /* se fuerza a que se ubique en un lugar de la pantalla */ 
    left:2em; /* donde va a estar */
    width:auto; /* el ancho por defecto que va a tener */
    padding:5px; /* la separación entre el contenido y los bordes */
    background-color: #ff6611; /* el color de fondo por defecto */
    border: 3px coral solid;
    border-radius: 0.5em;
    color: white;
    opacity: 0.85;
}

label.error + div.errorImage {
    background:url("../img/error.png") no-repeat 0px 0px;
    display:inline-block !important;
    width:22px;
    height:22px;
    vertical-align: middle;
}

label.checked + div.errorImage {
    background:url("../img/valid.png") no-repeat 0px 0px;
    display:inline-block !important;
    width:22px;
    height:22px;
    vertical-align: middle;
}

And for making the tooltips visible out of the bounds of its parents you must change the parent's overflow property to visible. If you are using jQueryUI see the css for making those changes.

overflow: visible;

And this is how it looks:

Edit: Created JSFiddle for demonstration, updated onfocusout method

https://jsfiddle.net/2vc5vmr0/

Just so others can find this solution:

I wanted to achieve the same relying on a more robust plugin and I found qtip2. It integrates nicely with jQuery Validate, as you can see here