How to display jqueryui validation error message in jqueryui tooltip

Question

I am following this tutorial to display validation errors in jqueryui tooltip. The validation works fine, but I am unable to display the correct error messages as the correc

Answer 1

Using the tutorial referenced in the original question, change line 4 from:

@{ Html.ValidateFor(m => m.UserName); }

to:

@Html.ValidationMessageFor(m => m.Username, null, new {style="visibility:hidden"})

Then, modify the content function as follows:

$(document).tooltip({
    items: ".input-validation-error",
    content: function () {
        return $("[data-valmsg-for='" + $(this).attr('id') + "']").text();
    }
});

Essentially, we don't want the original ValidationMessageFor span displaying (visibility=hidden). We're simply using it as the container for the tooltip.