Skip to main content

tooltip

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

Usage​

tooltip?: ComponentType<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​

import { Calendar } from "@svar-ui/react-calendar";
import EventTooltip from "./EventTooltip.jsx";

<Calendar events={events} date={date} tooltip={EventTooltip} />
// EventTooltip.jsx
function EventTooltip({ event, events }) {
  if (event) {
    return (
      <div className="tip">
        <strong>{event.text}</strong>
      </div>
    );
  } else if (events) {
    return (
      <ul>
        {events.map(e => (
          <li key={e.id}>{e.text}</li>
        ))}
      </ul>
    );
  }
  return null;
}

export default EventTooltip;
  • 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.