剑道工具提示相对于鼠标位置？答案

【问题标题】：Kendo Tooltip relative to mouse position?剑道工具提示相对于鼠标位置？
【发布时间】：2013-11-06 20:05:34
【问题描述】：

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

【问题讨论】：

好问题。完成此操作后，我通常会弄乱样式以使其靠近鼠标。 .k-tooltip{ }

标签： javascript jquery kendo-ui tooltip kendo-tooltip

【解决方案1】：

此功能目前不包含在剑道工具提示中。您可以这样做作为一种解决方法：

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

【讨论】：

【解决方案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);
    }
});

【讨论】：