肯德图文提示如何相对于鼠标位置显示？

Question

我希望在点击/触发Kendo Tooltip打开时，它能够显示在鼠标旁边。似乎我只能相对于HTML元素打开它，例如：mytooltip.show('#area')。但是我应该如何使其相对于鼠标位置显示呢？

- TruMan1

---

好问题。当我做这个的时候，我通常会调整样式来使其接近我的鼠标。.k-tooltip{ } - GodsCrimeScene

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

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

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

但是Kendo弹出框的代码会有些干扰（它也会设置位置，这会导致在移动时出现闪烁），所以如果这是个问题，您可能需要编写自定义小部件。

- Lars Höppner

Answer 2

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

<div id="target" class="someContent">一些内容</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);
    }
});

- v2p