Bootstrap Popovers will not show properly if offscreen on a mobile device

Question

As the title says, the popovers will not show properly if off screen. This seems like it makes sense, but the arrow for the popover still shows up. I need the popover to be visible on the page even if it is off screen.

I am using the popovers to serve as validation notices on my form. I am using jquery validate, the plugin.

This is the image of what happens.

Here is the code for the validation:

$(document).ready(function () {
        $("#form1").validate({
            onsubmit: false,
            rules: {
                ctl00$MainContent$txtEventName: { required: true },
                ctl00$MainContent$txtEventDate: { required: true, date: true },
                ctl00$MainContent$txtEventGuests: { required: true, number: true },
                ctl00$MainContent$txtZip: { required: true, number: true, minlength: 5 },
                ctl00$MainContent$txtEmail: { required: true, email: true },
                ctl00$MainContent$txtPwd: { required: true },
                ctl00$MainContent$txtConfirmPwd: { equalTo: "#MainContent_txtPwd" }
            },
            messages: {
                ctl00$MainContent$txtEventName: "Please enter the event name",
                ctl00$MainContent$txtEventDate: "Please enter a date that is not before today",
                ctl00$MainContent$txtEventGuests: "Please enter the amount of guests attending the event",
                ctl00$MainContent$txtZip: "Please enter a valid zipcode",
                ctl00$MainContent$txtEmail: "Please enter a valid email address",
                ctl00$MainContent$txtConfirmPwd: "Your passwords must match"
            },
            showErrors: function (errorMap, errorList) {
                //$.each(this.successList, function(index, value) {
                //    return $(value).popover("hide");
                //});
                return $.each(errorList, function(index, value) {
                    var _popover;
                    _popover = $(value.element).popover({
                        placement: "right",
                        content: value.message,
                        template: "<div class=\"popover\" style='width: 195px;'><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"></div></div></div>"
                    });
                    return $(value.element).popover("show");
                });
            },
            submitHandler: function (form) { // for demo
                return false; // for debug
            }
        });
    });

Does anyone have any ideas on what I could do to fix this?

Answer 1

Your methodology is slightly flawed. showErrors is used for composing a list of error messages for the whole form; it's not typically used to handle each message as it happens. For tooltips, you'll need to deal with each message as it occurs, not all of them at once.

For showing/hiding tooltips for your errors, you'll need to use the errorPlacement and success callback functions instead.

Adjust as needed for Bootstrap popovers...

$(document).ready(function () {

    $('#myform').validate({
          // rules and options here,
          errorPlacement: function (error, element) {
              // construct tooltip with message as per plugin method
              // show tooltip
          },
          success: function (label, element) {
              // hide tooltip as per plugin method
          }
    });

});

Reference: https://stackoverflow.com/a/14741689/594235

Documentation: http://jqueryvalidation.org/validate

---

Alternatively, here is a plugin that is supposed to automatically integrate jQuery Validate with Bootstrap Popovers, however, I have never used it myself.

https://github.com/mingliangfeng/jquery.validate.bootstrap.popover