Scheduler - How to show tooltip on hover over active area

This syntax is correct and it seems to work fine.

However, the screenshot doesn't correspond to the sample code - "left: 0, right: 0, top: 0, bottom: 0" will fill the whole cell.

So you might want to check if you don't override your onBeforeCellRender handler somewhere.

I don't think that I'm overriding it somewhere else. Would you please check my scheduler configuration. I'm adding three active areas for a start date, an end date and today.

However, if I click on the active area and move the mouse, the bubble shows correctly, but not everytime. Please this this video: https://drive.google.com/file/d/1cqlp7_s5yYO2ZCizlpmpVN47gl0tW6P2/view?usp=sharing

schedulerConfig: any = {
    zoomLevels: [
      {
        name: "OneMonth",
        properties: {
          timeHeaders: [
            { 'groupBy': "Month", 'format': "MMMM yyyy" },
            { 'groupBy': 'Week' },
            { 'groupBy': 'Day', 'format': 'ddd, d' }
          ]
        }
      },
      {
        name: "FourMonths",
        properties: {
          timeHeaders: [
            { 'groupBy': "Month", 'format': "MMMM yyyy" },
            { 'groupBy': 'Week' },
            { 'groupBy': 'Day', 'format': 'd' }
          ]
        }
      },
      {
        name: "EightMonths",
        properties: {
          timeHeaders: [
            { 'groupBy': "Year", 'format': "yyyy" },
            { 'groupBy': "Month", 'format': "MMM" },
            { 'groupBy': 'Week' }
          ]
        }
      },
      {
        name: "MoreThanEightMonths",
        properties: {
          timeHeaders: [
            { 'groupBy': "Year", 'format': "yyyy" },
            { 'groupBy': "Month", 'format': "MMM" }
          ]
        }
      }
    ],
    scale: 'Day',

    theme: 'scheduler_care_absence_action',
    eventEndSpec: 'Date',
    rowHeaderScrolling: false, // To hide divider between row headers and the main Scheduler grid
    durationBarVisible: false,
    heightSpec: 'Max100Pct',
    hideBorderFor100PctHeight: true,
    locale: this.localeService.localeId,
    cellWidthSpec: 'Auto',
    crosshairType: 'Full',
    showNonBusiness: true,
    businessWeekends: false,
    eventHeight: 15,
    rowMinHeight: 20,
    headerHeight: 20,
    rowMarginBottom: 0,
    eventMoveHandling: 'Disabled',
    eventResizeHandling: 'Disabled',
    eventDoubleClickHandling: 'Enabled',
    eventBorderVisible: false,
    rowHeaderHideIconEnabled: false,
    eventHoverHandling: 'Bubble',
    timeRangeSelectedHandling: 'Disabled',
    eventMarginBottom: 1,
    treeEnabled: false,

    bubble: new DayPilot.Bubble({
      onLoad: (args) => {
        this.showTooltip(args);
      },
      animated: false,
      showLoadingLabel: false,
      showAfter: 100,
      hideAfter: 100
    }),

    onBeforeEventRender: (args) => {

    },

    onBeforeTimeHeaderRender: (args) => {
      if (this.schedulerConfig) {
        if ((this.schedulerConfig.zoom == 0 || this.schedulerConfig.zoom == 1) && args.header.level === 1) {
          args.header.html = `${this.dialogTextService.getTranslation('TitWeek')} ${args.header.start.weekNumberISO().padStart(2, '0')}`;
        }
        if (this.schedulerConfig.zoom == 2 && args.header.level === 2) {
          args.header.html = `${this.dialogTextService.getTranslation('TitWeek').substring(0, 1)}${args.header.start.weekNumberISO().padStart(2, '0')}`;
        }
      }
    },

    onBeforeCellRender: (args) => {
      // Alternate Row Colors
      if (args.cell.displayY % 2) {
        args.cell.backColor = "#FFFFFF";
      }
      else {
        args.cell.backColor = "#F5F5F5";
      }

      let startDate = args.cell.start.toDateLocal() as Date;

      // Highlighting care absence's start date
      if (new Date(this.careAbsence.startDate).isSame(startDate)) {
        args.cell.areas = [
          {
            action: 'Bubble',
            bubble: new DayPilot.Bubble({
              onLoad: (args) => {
                args.html = this.dialogTextService.getTranslation('TitStartDate');
              }
            }),
            left: 0, right: 0, top: 0, bottom: 0,
            style: "background-image: linear-gradient(135deg, #B5ADE6 10%, transparent 10%, transparent 50%, #B5ADE6 50%, #B5ADE6 60%, transparent 60%, transparent); background-size: 10px 10px;"
          }
        ];
      }

      // Highlighting care absence's end date, if any
      if (this.careAbsence.endDate && new Date(this.careAbsence.endDate).isSame(startDate)) {
        args.cell.areas = [
          {
            action: 'Bubble',
            bubble: new DayPilot.Bubble({
              onLoad: (args) => {
                args.html = this.dialogTextService.getTranslation('TitEndDate');
              }
            }),
            left: 0, right: 0, top: 0, bottom: 0, style: "background-image: linear-gradient(135deg, #B5ADE6 10%, transparent 10%, transparent 50%, #B5ADE6 50%, #B5ADE6 60%, transparent 60%, transparent); background-size: 10px 10px;"
          }
        ];
      }

      // Otherweise highlight current day
      if (startDate.isSame(Date.today()) && !new Date(this.careAbsence.startDate).isSame(Date.today())) {
        args.cell.areas = [
          { left: 0, right: 0, top: 0, bottom: 0, style: "background-image: linear-gradient(135deg, #FFC680 10%, transparent 10%, transparent 50%, #FFC680 50%, #FFC680 60%, transparent 60%, transparent); background-size: 10px 10px;" }
        ];
      }
    },

    onEventDoubleClick: (args) => {
      const actionId = args.e.data.id as number;
      const careAbsenceAction = this.actions.find(a => a.id == actionId);

      if (careAbsenceAction == null) {
        return null;
      }

      if (this.editCareAbsenceActionCommand.canExecute(careAbsenceAction)) {
        this.editCareAbsenceActionCommand.execute(careAbsenceAction);
      }
    }
  };

It looks like you are using a full crosshair. The crosshair divs are displayed over the background cells and that prevents the bubble from showing up on hover.

You would have to switch to crosshairType: "Header" to make it work.