Jquery Tooltip with Ajax.BeginForm ValidationMessageFor
<p>I want to have the field validation displayed as tooltip errors. However, I cannot see how as none of the js functions are firing in my form.</p>

<p>I have the following Model</p>

<pre><code>public class QuickContact
{
    [Required]
    [StringLength(100, ErrorMessage = "Your name must be at least {2} characters long.", MinimumLength = 6)]

    public string Name { get; set; }

    [Required]
    [DataType(DataType.PhoneNumber)]
    public string Telephone { get; set; }
}
</code></pre>

<p>and the following form inside my partial view;</p>

<pre><code>@using (Ajax.BeginForm(
            "QuickContact",
            "Contact",
            new AjaxOptions
            {
                OnFailure = "contact.onFailure",
                OnBegin = "contact.onBegin",
                OnComplete = "contact.onComplete",
                OnSuccess = "contact.onSuccess",
                UpdateTargetId = "quickContactForm"
            }))
        {
            @Html.AntiForgeryToken()

            &lt;div class="form-group"&gt;
                @Html.EditorFor(x =&gt; x.Name, new { htmlAttributes = new { @class = "form-control", placeholder = "Enter your name..." } })
                @Html.ValidationMessageFor(x =&gt; x.Name, null, new { @class = "text-danger" })

                @Html.EditorFor(x =&gt; x.Telephone, new { htmlAttributes = new { @class = "form-control", placeholder = "Enter your telephone..." } })
                @Html.ValidationMessageFor(x =&gt; x.Telephone, null, new { @class = "text-danger" })

                &lt;input type="submit" class="btn btn-block btn-primary" value="Submit" /&gt;
            &lt;/div&gt;
        }
</code></pre>

<p>the generated html is; </p>

<pre><code>&lt;form action="/Contact/QuickContact" data-ajax="true" data-ajax-begin="contact.onBegin" data-ajax-complete="contact.onComplete" data-ajax-failure="contact.onFailure" data-ajax-mode="replace" data-ajax-success="contact.onSuccess" data-ajax-update="#quickContactForm" id="form0" method="post" novalidate="novalidate"&gt;&lt;input name="__RequestVerificationToken" type="hidden" value="EQj3G0b56_1saLORAmRCPqoGM-CgCYizgCn-ete0v-Ky_Ok7ioycTe7YlfVzZVAm-AtEIJpRh1n1gKb4sMfU-5lTKDdAZeMNyd85IFpRoRo1"&gt;            &lt;div class="form-group"&gt;
                &lt;input class="form-control text-box single-line input-validation-error" data-val="true" data-val-length="Your name must be at least 6 characters long." data-val-length-max="100" data-val-length-min="6" data-val-regex="Do you really have numbers or symbols in your name?" data-val-regex-pattern="^[a-zA-Z]*$" data-val-required="The Name field is required." id="Name" name="Name" placeholder="Enter your name..." type="text" value=""&gt;
                &lt;span class="text-danger tooltip field-validation-error" data-valmsg-for="Name" data-valmsg-replace="true" data-original-title="" title=""&gt;&lt;span for="Name" class=""&gt;The Name field is required.&lt;/span&gt;&lt;/span&gt;

                &lt;input class="form-control text-box single-line input-validation-error" data-val="true" data-val-required="The Telephone field is required." id="Telephone" name="Telephone" placeholder="Enter your telephone..." type="tel" value=""&gt;
                &lt;span class="text-danger field-validation-error" data-valmsg-for="Telephone" data-valmsg-replace="true"&gt;&lt;span for="Telephone" class=""&gt;The Telephone field is required.&lt;/span&gt;&lt;/span&gt;

                &lt;input type="submit" class="btn btn-block btn-primary" value="Submit"&gt;
            &lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p>the js is automatically running the checks and displaying the errors correctly, however, these are just showing below the inputs.</p>

<p>How do I go about making these tooltips please?</p>

<p>**EDIT **</p>

<p>As an additional note I found a working exmape using the tooltip here</p>

<p><a href="http://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/AdvancedDemo/Tooltip.html" rel="nofollow">Tooltip - Jquery</a></p>

<p>However, this is using Html.BeginForm as opposed to Ajax.BeginForm. The difference here being that it appears the BeginForm is rendering </p>

<p>data-msg-required</p>

<p>whereas my form is rendering</p>

<p>data-val-required</p>

<p>if i specifically add these to the output then the js in the example works and the tool tips appear. However, if i do this then I am effectively not using my data annotations. </p>