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

Use Templates to Customize Tooltips

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" class="k-textbox" placeholder="Full name" required validationMessage="Enter {0}" style="width: 200px;" />
            <li  class="accept">
              <button class="k-button" 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"><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
Not finding the help you need? Improve this article