[英]Kendo Tooltip relative to mouse position?
I would like the Kendo Tooltip to show next to the mouse when clicking/triggering it to open. 我希望Kendo Tooltip在单击/触发打开时显示在鼠标旁边。 It seems I can only open it relative to an HTML element like this: mytooltip.show('#area'). 似乎我只能打开它相对于这样的HTML元素:mytooltip.show('#area')。 How would I make it show relative to the mouse position though? 虽然如何让它相对于鼠标位置显示?
This feature is not included in Kendo Tooltip at the moment. 此功能目前不包含在Kendo Tooltip中。 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/ 小提琴: 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/ 小提琴: 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. Kendo Popup的代码虽然干扰了这一点(它也会设置位置,导致移动时闪烁),所以如果这是一个问题,你可能不得不编写一个自定义小部件。
Today I faced a similar problem. 今天我遇到了类似的问题。 Improved Lars Höppner solution, fixed the blinking of the tooltip. 改进了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);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.