带有 Primevue Tooltip 组件的 FullCalendar

问：

我正在尝试在我的日历中创建工具提示，日历工作正常，但我想显示事件的更多详细信息，例如悬停时事件的描述。为此，我正在使用 primevue 的工具提示组件，但我对如何实现它没有太多想法......有人可以帮我解决这个问题吗？

Primevue 工具提示组件链接： https://primevue.org/tooltip/

在我的Primevue.js文件中：

import { defineNuxtPlugin } from "#app";

import Tooltip from 'primevue/tooltip'; 

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(PrimeVue, { ripple: true });
    nuxtApp.vueApp.directive('tooltip', Tooltip);

});

在我的 fullcalendar 组件中：

<script>
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import esLocale from "@fullcalendar/core/locales/es";

export default {
  components: {
    FullCalendar, // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: "dayGridMonth",
        headerToolbar: {
          left: "prev,next today",
          center: "title",
          right: "dayGridMonth",
        },
        locale: esLocale,
        events: [
          {
            title: "event 1",
            date: "2023-11-01",
            description: "Description for Event 2",
          },
          {
            title: "event 2",
            date: "2023-11-02",
            description: "Description for Event 1",
          },
        ],
        eventMouseEnter: this.handleEventMouseEnter,
      },
    };
  },
};
</script>
<template>
  <div class="calendar-container">
    <FullCalendar :options="calendarOptions" />
  </div>
</template>