将鼠标悬停在全日历上的事件上时如何设置v-popover模板的位置？

Question

我想将我的v-popover模板准确地定位在鼠标输入事件中完整日历事件的特定位置上

首先，我已经实现了完整的日历eventRender事件，以将tooltip.js插件与HTML内容绑定在一起，但是没有选择在弹出内容上添加@click事件的选项，但是没有定位问题。但是v-popover模板具有@click事件选项，但无法将其正确定位到日历事件位置。

完整的日历组件代码：

<FullCalendar
      ref="fullCalendar"
      :customButtons="this.customButtons"
      :eventLimit="this.config.eventLimit"
      :header="false"
      :events="events"
      :plugins="calendarPlugins"
      :defaultDate="date"
      @datesRender="setDatepickerValue"
      @eventMouseEnter="getEventDetailsPopup"
      @eventMouseLeave="hidePopover"
      defaultView="dayGridMonth"
    />

弹出模板：

<v-popover :open="showPopover" :offset="offset">
      <!-- This will be the content of the popover -->
      <template slot="popover">
        <div
          @click="callEventDetailPopup"
          class="container absolute max-w-sm mx-auto overlay cursor-pointer rounded"
        >          
        </div>
        <div class="container bg-white max-w-1 mx-auto">
            <div class="px-6 py-2 bg-blue-900 h-9">
              <span
                class="inline-block bg-gray-200 rounded-full px-3 text-sm font-semibold text-gray-700 mr-2"
              >Autoschedule</span>
            </div>
          </div>
        </div>
      </template>
    </v-popover>

.vue页面方法

methods: {
    getEventDetailsPopup: function(mouseInfo) {
      this.showPopover = true;
      this.left = mouseInfo.jsEvent.clientX;
      this.top = mouseInfo.jsEvent.clientY;

      this.offset = this.left + "," + this.top;
      VTooltip.options.container = mouseInfo.el;
    },
    hidePopover: function() {
      this.showPopover = false;
    }

v-popover模板需要显示在日历事件所在的位置以及将鼠标悬停在该事件上的位置。