JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<script id="tooltip-template" type="text/x-kendo-template">
    <ul>
        <li><div>Six min characters: </div><br/>
         status: (
                   <span data-bind="text: isMeetMinChar"></span>
                 )
        </li>
    </ul>
</script>
   
<span>Enter Value to validate</span>
<div class="main-wrap">
   <input type="text" data-value-update="keyup" data-bind="value: inputValue" />
</div><br/>

value:<span data-bind="text: inputValue"></span><br/>
length:<span data-bind="text: inputValue.length"></span><br/>
Status:<span data-bind="text: isMeetMinChar"></span>

CSS

ul li{
    list-style-type: none;
}

JavaScript

var viewModel = kendo.observable({
    inputValue: string = "",    
    isMeetMinChar: function(e){
        return this.get("inputValue").length >=6 ? "Pass" : "Fail";
    }       
});

$(document).ready(function () {    
    $(".main-wrap").kendoTooltip({
            filter: "input",
            content: kendo.template($("#tooltip-template").html()),
            position: "right",
            width: 200
        }).data("kendoTooltip");
    kendo.bind($("body"), viewModel);
});