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.

Answer 2

Today I faced a similar problem. Improved Lars Höppner solution, fixed the blinking of the tooltip.

<div id="target" class="someContent">Some Content</div>

let showTimeout;
let lastMouseX;
let lastMouseY;
const $tooltip = $("#target").kendoTooltip({
    content: "Tooltip content",
    show: function () {
        $(this.popup.wrapper).css({
            top: lastMouseY,
            left: lastMouseX
        });
    },
    position: 'right',
    animation: false
}).data('kendoTooltip');

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

    clearTimeout(showTimeout);

    if ($(e.target).hasClass('someContent')) {
        $('.k-tooltip').parent().css({
            top: lastMouseY,
            left: lastMouseX
        });
        $tooltip.show();
    } else {
        showTimeout = setTimeout(() => {
            $tooltip.hide();
        }, 300);
    }
});