Kendo Tooltip relative to mouse position?

Question

I would like the Kendo Tooltip to show next to the mouse when clicking/triggering it to open. It seems I can only open it relative to an HTML element like this: mytooltip.show('#area'). How would I make it show relative to the mouse position though?

Answer 1

This feature is not included in Kendo Tooltip at the moment. You can do this as a workaround:

var lastMouseX,
lastMouseY;

$(document).on("mousemove", function (e) {
    lastMouseX = e.pageX;
    lastMouseY = e.pageY;
});

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

Fiddle: http://jsfiddle.net/lhoeppner/qan4T/

If you want it to move while you move the mouse, you could try this:

var lastMouseX,
lastMouseY;

$(document).on("mousemove", function (e) {
    lastMouseX = e.pageX;
    lastMouseY = e.pageY;

    $(".k-tooltip").parent().css({
            top: lastMouseY,
            left: lastMouseX
        });
});

Fiddle: http://jsfiddle.net/lhoeppner/ASpkC/

The code for Kendo Popup interferes with this a bit though (it will also set the position, which results in flickering while you move), so if that is a problem, you'd probably have to write a custom widget.