FullCalendar with Primevue Tooltip component

Question

I'm trying to create tooltips in my calendar, the calendar works fine but I want to show more details of the events, such as the description of the events on hover. and for this I am using the tooltips component of primevue, but I don't have much of an idea of ​​how to implement it... could someone help me with this?

Primevue tooltips component link: https://primevue.org/tooltip/

in my primevue.js file:

import { defineNuxtPlugin } from "#app";

import Tooltip from 'primevue/tooltip'; 

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

});

in my fullcalendar component:

<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>