Skip to main content

tooltip

Replaces the default hover tooltip with a custom Vue component. Receives the event under the cursor (or the day's events in the year view).

Usage​

tooltip?: Component<TooltipProps>;

type TooltipProps = {
  event?: CalendarEvent;       // single-event hover (day, week, month, agenda, resources, timeline)
  events?: CalendarEvent[];    // day-cell hover in the year view
};

Default: undefined.

Example​

<script setup lang="ts">
  import { Calendar } from "@svar-ui/vue-calendar";
  import EventTooltip from "./EventTooltip.vue";
</script>

<template>
  <Calendar :events="events" :date="date" :tooltip="EventTooltip" />
</template>
<!-- EventTooltip.vue -->
<script setup lang="ts">
  import type { CalendarEvent } from "@svar-ui/vue-calendar";

  const props = defineProps<{ event?: CalendarEvent; events?: CalendarEvent[] }>();
</script>

<template>
  <div v-if="event" class="tip">
    <strong>{{ event.text }}</strong>
  </div>
  <ul v-else-if="events">
    <li v-for="e in events" :key="e.id">{{ e.text }}</li>
  </ul>
</template>
  • eventPopup — interactive click card if hover-only is not enough.
  • eventContent — change the event itself instead of layering a tooltip.
  • Tooltip — full guide for hover previews.