Message only in tooltip

2 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    6 posts
    Member since:
    Jun 2014

    Posted 25 Jun 2014 Link to this post

    Due to the size restrictions on my page, I would like to only show the validation icon beside each field and have the message within a tooltip of that icon.

    In other words, is there a way to go from this (default generated):

    <span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" data-for="Impact" role="alert">
       <
    span class="k-icon k-warning"> </span> Impact is required
    </
    span>


    To this:

    <span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" data-for="Impact" role="alert">
       <span class="k-icon k-warning" title="Impact is required"> </span>
    </span>
  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 27 Jun 2014 Link to this post

    Hello Jonathan,

    You can customize the error message container rendering via the errorTemplate option.  For example:

    <form>
      <input name="productName" required /> <br/>
      <button>Save</button>
    </form>
    <script>
      $("form").kendoValidator({
        errorTemplate: '<span class="k-widget k-tooltip k-tooltip-validation"><span class="k-icon k-warning" title="${message}"></span></span>'
      });
    </script>


    Regards,
    Rosen
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top