javascript - 剑道工具提示相对于鼠标位置？

Question

我希望 Kendo 工具提示在单击/触发它打开时显示在鼠标旁边。看来我只能相对于这样的 HTML 元素打开它：mytooltip.show('#area')。我如何让它相对于鼠标位置显示？

Answer 1

此功能目前不包含在 Kendo Tooltip 中。您可以这样做作为一种解决方法：

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

小提琴：http: //jsfiddle.net/lhoeppner/qan4T/

如果您希望它在移动鼠标时移动，您可以试试这个：

var lastMouseX,
lastMouseY;

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

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

小提琴：http: //jsfiddle.net/lhoeppner/ASpkC/

Kendo Popup 的代码对此有一点干扰（它还会设置位置，这会导致您在移动时闪烁），所以如果这是一个问题，您可能必须编写一个自定义小部件。

Answer 2

今天我遇到了类似的问题。改进的 Lars Höppner 解决方案，修复了工具提示的闪烁问题。

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