Event Tooltip

The JavaScript Scheduler uses an event bubble by default. You can switch to the native browser tooltip using showToolTip and disable event-hover bubble handling as shown below. Server editions have their own defaults.

The default tooltip text is set to the event text and you can customize it in BeforeEventRender event handler.

API: eventHoverHandling, showToolTip, onBeforeEventRender.

The examples disable the event bubble, enable the browser tooltip and append (reservation) to the event name in onBeforeEventRender.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}],
    eventHoverHandling: "Disabled",
    showToolTip: true,
    onBeforeEventRender: args => { args.data.toolTip = args.data.text + " (reservation)"; }
  };

}

React

import React from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
      eventHoverHandling={"Disabled"}
      showToolTip={true}
      onBeforeEventRender={args => { args.data.toolTip = args.data.text + " (reservation)"; }}
    />
  </div>;
}

Vue

<script setup>
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
const eventHoverHandling = "Disabled";
const showToolTip = true;
const onBeforeEventRender = args => { args.data.toolTip = args.data.text + " (reservation)"; };

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :eventHoverHandling="eventHoverHandling"
      :showToolTip="showToolTip"
      :onBeforeEventRender="onBeforeEventRender"
    />
  </div>
</template>

JavaScript

Since 8.3.2806 the event bubble is enabled by default and the tooltip is supressed. In order to switch to the native browser tooltip you need to set .bubble property to null:

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dp.bubble = null;
  dp.events.list = [
    {
      start: "2013-03-25T00:00:00",
      end: "2013-03-25T12:00:00",
      id: "123",
      resource: "A",
      text: "Event",
      toolTip: "my tooltip"
    }
  ]
  // ...
  dp.init();
</script>

protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  e.ToolTip = "my tooltip";
}

protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  e.ToolTip = "my tooltip";
}