CODEWITHSUNDEEP
jquerykendo-ui
Ather Hashmi
Ather Hashmi

Reputation: 121

kendo ui tooltip location

I am using kendo ui for my web design and at the moment i am stuck on the positioning of my validation tooltip. Wierd enough that for any dropdowns it appears exactly where i want it to appear, which is below the input, but for plain text inputs, the validation tooltip appears beside the input element. this is giving my page an inconsistent look. I have searched kendo documentation for tooltip but its not as detailed as i would like it to be and does not offer much help.

Any ideas how can i make sure my validation tooltip, regardless of the element type it is applied on, appears below the field being validated?

See the screenshot for more clarification:

enter image description here

Thanks in advance.

Upvotes: 1

Views: 3933

Answers (3)

jwize
jwize

Reputation: 4165

You could try something like this.

I had a lot of trouble because I could add a callback handler to the validate event but it wasnt' called on blur events only on posts and I wanted to have inline to show on a summary at the top in real time.

First disable validateOnBlur so that the default stuff doesn't popup. 

 var validatable = $("form").kendoValidator( { 
    validateOnBlur:false,
    ...
    });

Next you can add your own validate callback.

As I noted this doesn't get called on blur.

        validateOnBlur:false,
        validate: function (e) {
          ....
        },

Call validate on blur so that the fields are updated on blue.

Since we disabled this lets make sure it gets called both on form post as well as blur. 

    $("#input, textarea").on("blur", function (validator) {
        validator.validatable.validate();
    }.bind(null,this));

      // valid on submit where you like
    submit: function () {
        if (this.validatable.validate()) {
            $("#form1").submit();
        }
    },

Summary is easy to do. I put them at the top of my page in a control with a class errors-section

I copy the errors and put them somewhere else on the page in a summary. I also use some jquery to put a little star before the label. Note the next() is the span that has the error text. 

        validate: function (e) {
            $(".k-invalid").next().each(function () {
                $(".errors-section").append($(this).text()).show();
                $(this).text("");
            });
        },

That worked for me.

Upvotes: 0

Mauro Bilotti
Mauro Bilotti

Reputation: 6232

The best solution that I found to this is override the CSS .k-tooltip-validation and place it wherever you want, as the following example:

.k-tooltip-validation {
        margin-top: -40px !important; 
}

Hope it helps! :)

Upvotes: 1

Alex Gyoshev
Alex Gyoshev

Reputation: 11977

It really depends on the markup and styling of your page. Adding display: block to the input fields might solve the problem, or if you are using floats, adding a clear:left and the necessary margin to the validation messages.

Upvotes: 1

Related Questions