stackoverflow demo: tooltip

by whoamiwho

HTML

<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<div id="target">Some Content</div>

CSS

#target {
    margin-left: 100px;
    margin-top: 100px;
    width: 200px;
    background-color: grey;
}

JavaScript

var lastMouseX,
lastMouseY;

$(document).on("mousemove", function (e) {
    lastMouseX = e.pageX;
    lastMouseY = e.pageY;
    
    $(".k-tooltip").parent().css({
            top: lastMouseY,
            left: lastMouseX
        });
});

$("#target").kendoTooltip({
    content: "Tooltip content",
    show: function () {
        $(this.popup.wrapper).css({
            top: lastMouseY,
            left: lastMouseX
        });
    },
    animation: false
});