title: ASP.NET MVC validationMessageFor as bootstrap popover on the textbox
body: <p>I have a login page created with ASP.NET MVC, I want the MVC ValidationMessageFor to be displayed as bootstrap popout and over the corresponding text box. </p>
  
  <p>This is somewhat working but not exactly. Popout is coming but not getting displayed over the textbox and also ValidationMessageFor is getting displayed separately as well. Which should not.</p>
  
  <p>Any ideas or help will be appreciated.</p>
  
  <p><a href="https://i.stack.imgur.com/ZW9wa.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZW9wa.gif" alt="enter image description here"></a></p>
  
  <pre><code>    @model x.Areas.Account.Models.User
  
  @{
      Layout = null;
  }
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;title&gt;Login&lt;/title&gt;
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/bootstrap")
      &lt;script&gt;
          $(function () {    
              $(".field-validation-error[data-toggle='popover']").each(function () {
                  var x = $(this).text();
  
                  if (x) {
                      $(this).popover({
                          content: x,
                          trigger: "manual",
                          template: "&lt;div class=\"popover\"&gt;&lt;div class=\"arrow\"&gt;&lt;/div&gt;&lt;div class=\"popover-inner\"&gt;&lt;div class=\"popover-content\"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;"
                      });
                      $(this).popover('show');
                  }
              });
          });
      &lt;/script&gt;
      @Styles.Render("~/Content/css")
      &lt;style&gt;
          .required:after {
              content: "*";
              font-weight: bold;
              color: red;
          }
  
          .input-validation-error {
              border-color: red;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      @using (Html.BeginForm(null, null, FormMethod.Post, new { @class = "form-horizontal" }))
      {
          @Html.AntiForgeryToken()
  
          &lt;div&gt;
              &lt;fieldset&gt;
                  &lt;legend&gt;Login&lt;/legend&gt;
                  &lt;div&gt;
                      @Html.LabelFor(u =&gt; u.UserName, new { @class = "required" })
                      &lt;div&gt;
                          @Html.TextBoxFor(u =&gt; u.UserName)
                          @Html.ValidationMessageFor(u =&gt; u.UserName, null, new { @class = "text-danger", @data_toggle = "popover", @data_placement = "top" })
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      @Html.LabelFor(u =&gt; u.Password, new { @class = "required" })
                      &lt;div&gt;
                          @Html.PasswordFor(u =&gt; u.Password)
                          @Html.ValidationMessageFor(u =&gt; u.Password, null, new { @class = "text-danger", @data_toggle = "popover", @data_placement = "right" })
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div style="margin-top:5px;"&gt;
                      &lt;input type="submit" class="btn btn-primary" value="Log In" /&gt;
                  &lt;/div&gt;
                  &lt;div style="margin-top:5px; margin-left:5px;"&gt;
                      &lt;input type="button" id="btnErrLog" class='overlay' value="Error Log" /&gt;
                  &lt;/div&gt;
              &lt;/fieldset&gt;
          &lt;/div&gt;
      }
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Update 1: Applying suggested reply with success :)</p>
  
  <pre><code>$("input[data-toggle=popover]").each(function () {
              var id = $(this).attr('id');
              var validator = $('[data-valmsg-for=' + id + ']');
              var msg = $(validator).html();
  
              if (msg) {
                  $(this).popover({
                      content: msg,
                      trigger: "manual",
                      template: "&lt;div class=\"popover\"&gt;&lt;div class=\"arrow\"&gt;&lt;/div&gt;&lt;div class=\"popover-inner\"&gt;&lt;div class=\"popover-content\"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;"
                  });
                  $(this).popover('show');
                  $(validator).hide();
              }
          });
  
  &lt;div&gt;
                  @Html.LabelFor(u =&gt; u.UserName, new { @class = "required" })
                  &lt;div&gt;
                      @Html.TextBoxFor(u =&gt; u.UserName, new { @class = "text-danger", @data_toggle = "popover", @data_placement = "top" })
                      @Html.ValidationMessageFor(u =&gt; u.UserName, null, new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  @Html.LabelFor(u =&gt; u.Password, new { @class = "required" })
                  &lt;div&gt;
                      @Html.PasswordFor(u =&gt; u.Password, new { @class = "text-danger", @data_toggle = "popover", @data_placement = "right" })
                      @Html.ValidationMessageFor(u =&gt; u.Password, null, new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>