Display errors in tooltips jquery plugin based on asp.net mvc validation attributes

I want to display jquery errors in tooltips like in this image:

there is some jquery plugins around which could do that: http://www.position-relative.net/creation/formValidator/demos/demoValidators.html http://validity.thatscaptaintoyou.com/

But they not designed to work with asp.net mvc 3.0 validation attributes. Is there any similar p开发者_如何学编程lugin which would do the thing? or any thing else i can do to display errors like that in tooltips?

We have done something similar to this using Jquery validation plugin. For this we have to create the popup div initially.

Javascript Fn

$("#formID").validate({
        submitHandler: function (form) {
            CallFunction();
        },

        highlight: function (element, errorClass) {
            HidePopup(element);
            ShowPopup(element);
        },

        unhighlight: function (element, errorClass) {
            HidePopup(element);
        },

        errorElement: "span",

        errorPlacement: function (error, element) {
            error.appendTo(element.prev("label"));
        },

        rules: {
           txtName:"required"
        }
});

function ShowPopup(paramElement)
{
    //function to show popup and position div accordingly
    $('#div'+paramElement.Id).show();
}

function HidePopup(paramElement)
{
    //function to hide popup
    $('#div'+paramElement.Id).hide();
}



**Html**


<form id="formID" action="">

    <input name="txtName" type="text" id="txtName" />
    <div id="divtxtName" >Please enter name</div>

</form>