JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css">
<div id="chart"></div>

CSS

.k-tooltip{
   position:fixed;
   top:50px;
}

JavaScript

function createChart() {
    $("#chart").kendoChart({
        theme: $(document).data("kendoSkin") || "default",
        title: {
            text: "Internet Users"
        },
        legend: {
            position: "bottom"
        },
        seriesDefaults: {
            type: "column"
        },
        series: [{
            name: "World",
            data: [15.7, 16.7, 20, 23.5, 26.6]},
        {
            name: "United States",
            data: [67.96, 68.93, 75, 74, 78]}],
        valueAxis: {
            labels: {
                format: "{0}%"
            }
        },
        categoryAxis: {
            categories: [2005, 2006, 2007, 2008, 2009]
        },
        tooltip: {
            visible: false,
            format: "{0}%"
        },
        seriesHover: showTooltip
    });
}

function showTooltip(e) {
    $("#chart .k-tooltip").html(kendo.format(e.series.tooltip.format, e.value) + " - " + e.category).show();
}

$(document).ready(function() {
    createChart();

    $("#chart").mouseleave(function(e) {
        $("#chart .k-tooltip").html(e.value).hide()
    })
});