Kendo validator ToolTip not aligning with correct column

3 posts, 0 answers
  1. Brian
    Brian avatar
    10 posts
    Member since:
    Jun 2011

    Posted 16 Dec 2013 Link to this post

    I am using the Kendo k-tooltip-validation and k-invalid-msg to display validation errors in the Kendo grid.  I have two questions.

    1)  Is there a way to make the tooltip's width to automatically expand when the message text is longer?  The tooltip seems to have a static width.

    2)  There is a small "nub" on the top (center) of the tooltip.  From the user's perspective, it appears the message is aligned to the wrong column (see attached PNG).  It appears the tooltip starts in the correct spot, but the "nub" points to the next column over.  Is there a way to align the small arrow to the left, OR remove it entirely?

    The code appears to be pointing to the correct column:
             ModelState.AddModelError("RateUOM", "UOM must be 'LB' or 'CS'");

    Thanks,
    R
  2. Brian
    Brian avatar
    10 posts
    Member since:
    Jun 2011

    Posted 17 Dec 2013 Link to this post

    I believe I have figured out how to resolve this.  I found which style was responsible for the "nub" (k-callout-n).  I was able to override the CSS style with inline CSS (higher specificity) in the validation template:
             <div class="k-callout k-callout-n" style="left:10%"></div>

    This moved the pointer nearer to the actual column getting the error.
  3. Kendo UI is VS 2017 Ready
  4. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 18 Dec 2013 Link to this post

    Hi Rich,

    Basically the validation error tooltips appear under the cell and are aligned with it to the left. As a result if the tooltip is wider than the cell it might appears as if it's related to the next cell. Increasing the UOM's width a little should help with that. Regarding your second question - the tooltip's width is not static, however there is a max-width of 300px that could be overridden with the following CSS rule:  
    .k-tooltip {
        max-width: 500px !important;
    }


    Regards,
    Alexander Popov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top