CODEWITHSUNDEEP
javascriptjquerykendo-uitooltipkendo-tooltip
TruMan1
TruMan1

Reputation: 36078

Kendo Tooltip relative to mouse position?

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?

Upvotes: 4

Views: 8199

Answers (2)

v2p
v2p

Reputation: 659

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);
    }
});

Upvotes: 0

Lars H&#246;ppner
Lars H&#246;ppner

Reputation: 18402

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.

Upvotes: 7

Related Questions