New to Kendo UI for jQuery? Download free 30-day trial

Use Templates to Customize Tooltips in the Validator


Product Progress® Kendo UI® Validator for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I a template to customize a tooltip in the Kendo UI Validator?


The following example demonstrates how to use an errorTemplate to customize the tooltip in Kendo UI.

    <div id="example">
      <div class="demo-section k-header">
        <form id="tickets">
          <h3>Book Tickets</h3>
              <label for="fullname" class="required">Your Name</label>
              <div style="display:inline-block">
                <input type="text" id="fullname" name="fullname" placeholder="Full name" required validationMessage="Enter {0}" style="width: 200px;" />
            <li  class="accept">
              <button id="submit" type="submit">Submit</button>
            <li class="status">
      <style scoped>
        .k-textbox {
          width: 11.8em;
        .demo-section {
          width: 700px;
        #tickets {
          width: 510px;
          height: 323px;
          margin: 0 auto;
          padding: 10px 20px 20px 170px;
          background: url('../content/web/validator/ticketsOnline.png') transparent no-repeat 0 0;
        #tickets h3 {
          font-weight: normal;
          font-size: 1.4em;
          border-bottom: 1px solid #ccc;
        #tickets ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
        #tickets li {
          margin: 7px 0 0 0;
        label {
          display: inline-block;
          width: 90px;
          text-align: right;
        .required {
          font-weight: bold;
        .accept, .status {
          padding-left: 90px;
        .valid {
          color: green;
        .invalid {
          color: red;
        span.k-tooltip {
          margin-left: 6px;
        $(document).ready(function() {
          var errorTemplate = '<div class="k-widget k-tooltip k-tooltip-error"' +
              'style="margin:0.5em; display:block"><span class="k-icon k-warning"> </span>' +
              '#=message#<div class="k-callout k-callout-n"></div></div>'
          var validator = $("#tickets").kendoValidator({
            errorTemplate: errorTemplate
          var status = $(".status");
          $("form").submit(function(event) {
            if (validator.validate()) {
              status.text("Hooray! Your tickets has been booked!")
            } else {
              status.text("Oops! There is invalid data in the form.")

See Also

In this article