我将Tippy(https://atomiks.github.io/tippyjs/)实现为Fullcalendar(https://fullcalendar.io/)的工具提示库
我在fullcalendar的eventRender函数中拥有此功能:
eventRender(info) {
info.el.setAttribute('id', info.event.id);
let eventWidth = 0;
let relX = 0;
let relY = 0;
let relOffsetX = 0;
$( info.el).mouseover(function( event ) { //info.el -> html element
relX = event.pageX - $(this).offset().left;
relY = event.pageY - $(this).offset().top;
eventWidth = document.getElementById(info.event.id).offsetWidth;
relOffsetX = relX - eventWidth / 2; // not finished but atm nothing is set as offset
tippy(info.el, {
content: `${info.event.extendedProps.listTitle } / ${ info.event.extendedProps.swimlaneTitle}`,
offset: relOffsetX,
});
});
偏移量已正确计算,但不起作用,工具提示始终位于同一位置,而忽略了鼠标位置。
有人可以帮忙吗?
我还将接受另一个效果更好的Tooltip节点或流星包作为替代解决方案。