Skip to main content

tooltip

Replaces the default hover tooltip with a custom Svelte 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 lang="ts">
  import { Calendar } from "@svar-ui/svelte-calendar";
  import EventTooltip from "./EventTooltip.svelte";
</script>

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

  let { event, events }: { event?: CalendarEvent; events?: CalendarEvent[] } = $props();
</script>

{#if event}
  <div class="tip">
    <strong>{event.text}</strong>
  </div>
{:else if events}
  <ul>
    {#each events as e}
      <li>{e.text}</li>
    {/each}
  </ul>
{/if}
  • 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.