How to style a Span to look like a validation popup with arrow

2 posts, 0 answers
  1. Shawn
    Shawn avatar
    66 posts
    Member since:
    Jun 2014

    Posted 19 Jun 2019 Link to this post

    Hello,

    I'm trying to customize a span element to look like a validation popup with the arrow on top pointing to an input element.  I am not able to use validation in this case, and I'm trying to display a tooltip instead.  I have the following:

    <span id="validation" class="k-widget k-tooltip k-tooltip-validation k-x-invalid-msg-block"></span>

     

    The code above almost works, however, the little directional arrow on top of the span is not displayed.  If I include 'k-callout' and 'k-callout-n' then the entire span moves and is distorted.  Can anyone help me get the little arrow to show up?   Any help is appreciated. Thanks!

  2. Eyup
    Admin
    Eyup avatar
    4046 posts

    Posted 20 Jun 2019 Link to this post

    Hello Shawn,

    Kendo grid validation works in a similar fashion:
    https://demos.telerik.com/kendo-ui/grid/editing-custom-validation

    Could you send a sample image to demonstrate how exactly you want your tooltip to look like? You can modify the following live dojo sample and send it back to us. Then, I will be able to modify it depending on your scenario:
    https://dojo.telerik.com/OmAGUPIL/4

    Regards,
    Eyup
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top