Подсказка Kendo относительно положения мыши?

Question

Я хотел бы, чтобы подсказка Kendo отображалась рядом с мышью при нажатии/срабатывании ее открытия. Кажется, я могу только открыть его относительно HTML-элемента следующим образом: mytooltip.show ('# area'). Как я могу показать это относительно позиции мыши?

Answer 1

Эта функция не включена в подсказку Kendo на данный момент. Вы можете сделать это в качестве обходного пути:

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