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

[Shawn]

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!

[Eyup]

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