Question

我希望Kendo Tooltip在点击/触发打开时显示在鼠标旁边。似乎我只能打开它相对于这样的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的代码虽然干扰了这一点（它也会设置位置，导致移动时闪烁），所以如果这是一个问题，你可能需要编写一个自定义小部件。 / p>

Answer 2

今天我遇到了类似的问题。改进了LarsHö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);
    }
});

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

2 个答案: