鼠标定位工具提示(Tippy,Tooltip.js)在Fullcalendar上

时间:2019-10-24 08:29:03

标签: node.js meteor fullcalendar popper.js tippyjs

我将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节点或流星包作为替代解决方案。

0 个答案:

没有答案