---
title: "Javascript Scheduler Cell Hover Summary Tooltip Example | Mobiscroll"
component: "Scheduler"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/scheduler/show-cell-summary-on-hover"
---

# Cell Hover Summary Tooltip - JavaScript Scheduler demo

Show a per-cell summary tooltip in the Javascript Scheduler — hover over any schedule cell to display event count, invalid slots, and color ranges. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/scheduler/show-cell-summary-on-hover)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/scheduler/show-cell-summary-on-hover)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/scheduler/show-cell-summary-on-hover.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/show-cell-summary-on-hover.md), [React](https://demo.mobiscroll.com/react/scheduler/show-cell-summary-on-hover.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/show-cell-summary-on-hover.md)

## Description

This demo demonstrates how to surface detailed cell summaries through tooltips when hovering over schedule cells.

Using [`onCellHoverIn`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onCellHoverIn) and [`onCellHoverOut`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onCellHoverOut) events, each tooltip dynamically displays the total number of events, invalid and colors in the hovered cell.

## What this demo shows

- A desktop weekly scheduler layout with a fixed week strip at the top, a fixed all-day row below it, and a scrollable scheduler time grid for the selected week.
- **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day.
- **Week view** The fixed strip below the header displays the days of the selected week, with the current date highlighted by a blue circle.
- **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid.
- **Time grid** The scheduler grid scrolls vertically through the hours of the selected week.
- **Invalid cells** Disabled time grid cells are shown with a gray background.
- **Colored cells** Colored time grid ranges are shown with a light green striped background.
- **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title.
- **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts.
- **Current time** A blue current-time line appears across the time grid, with a small blue dot marking the current date.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Cell summary tooltip** Hovering over scheduler cells opens a tooltip with the total number of events, invalids, and colors in the hovered cell.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event.

## Best for

- **Healthcare scheduling** Display appointments, unavailable periods, room availability, and staff availability in one weekly scheduler view.
- **Workforce and shift planning** Manage employee schedules, vacations, maintenance windows, and overlapping assignments while showing unavailable time slots.
- **Facility and resource booking** Show meeting rooms, equipment, or shared resources with blocked periods, special availability, and simultaneous reservations.
- **Field service and maintenance planning** Coordinate technician visits, travel time, and service appointments while making restricted time periods visible.
- **Education and training schedules** Organize classes, instructors, classrooms, and recurring weekly sessions alongside holidays or unavailable periods.
- **Manufacturing and production planning** Schedule jobs across workstations while highlighting maintenance windows, downtime, and capacity constraints.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-themeVariant) - option
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-data) - option
- [`invalid`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-invalid) - option
- [`colors`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-colors) - option
- [`cssClass`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-cssClass) - option
- [`onCellHoverIn`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onCellHoverIn) - event
- [`setOptions`](https://mobiscroll.com/docs/javascript/popup/api#method-setOptions) - method
- [`anchor`](https://mobiscroll.com/docs/javascript/popup/api#opt-anchor) - option
- [`open`](https://mobiscroll.com/docs/javascript/popup/api#method-open) - method
- [`onCellHoverOut`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onCellHoverOut) - event
- [`close`](https://mobiscroll.com/docs/javascript/popup/api#method-close) - method
- [`display`](https://mobiscroll.com/docs/javascript/popup/api#opt-display) - option
- [`showOverlay`](https://mobiscroll.com/docs/javascript/popup/api#opt-showOverlay) - option
- [`touchUi`](https://mobiscroll.com/docs/javascript/popup/api#opt-touchUi) - option
- [`scrollLock`](https://mobiscroll.com/docs/javascript/popup/api#opt-scrollLock) - option

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

var cellDate = document.getElementById('demo-cell-summary-date');
var cellEventNr = document.getElementById('demo-cell-summary-events');
var cellInvalidNr = document.getElementById('demo-cell-summary-invalid');
var cellColorNr = document.getElementById('demo-cell-summary-colors');

mobiscroll.eventcalendar('#demo-show-cell-summary-on-hover', {
  view: {
    scheduler: {
      type: 'week',
      startTime: '08:00',
      endTime: '18:00',
      timeCellStep: 30,
    },
  },
  data: [
    {
      start: '2026-10-20T08:00',
      end: '2026-10-20T11:00',
      title: 'Task 1',
    },
    {
      start: '2026-10-21T14:00',
      end: '2026-10-21T16:00',
      title: 'Task 2',
    },
    {
      start: '2026-10-22T15:00',
      end: '2026-10-22T17:00',
      title: 'Task 3',
    },
    {
      start: '2026-10-22T10:00',
      end: '2026-10-22T12:00',
      title: 'Task 4',
    },
    {
      start: '2026-10-23T08:00',
      end: '2026-10-23T11:00',
      title: 'Task 5',
    },
    {
      start: '2026-10-23T09:00',
      end: '2026-10-23T12:00',
      title: 'Task 6',
    },
    {
      start: '2026-10-23T10:00',
      end: '2026-10-23T12:00',
      title: 'Task 7',
    },
    {
      start: '2026-10-23T10:00',
      end: '2026-10-23T13:00',
      title: 'Task 8',
    },
    {
      start: '2026-10-23T10:00',
      end: '2026-10-23T14:00',
      title: 'Task 9',
    },
    {
      start: '2026-10-23T16:00',
      end: '2026-10-23T18:00',
      title: 'Task 10',
    },
    {
      start: '2026-10-24T13:00',
      end: '2026-10-24T17:00',
      title: 'Task 11',
    },
    {
      start: '2026-10-24T18:00',
      end: '2026-10-24T20:00',
      title: 'Task 12',
    },
    {
      start: '2026-10-25T08:00',
      end: '2026-10-25T12:00',
      title: 'Task 13',
    },
    {
      start: '2026-10-25T15:00',
      end: '2026-10-25T18:00',
      title: 'Task 14',
    },
    {
      start: '2026-10-26T08:00',
      end: '2026-10-26T11:00',
      title: 'Task 15',
    },
    {
      start: '2026-10-26T15:00',
      end: '2026-10-26T17:00',
      title: 'Task 16',
    },
    {
      start: '2026-10-27T09:00',
      end: '2026-10-27T12:00',
      title: 'Task 17',
    },
  ],
  invalid: [
    {
      start: '2026-10-21T12:00',
      end: '2026-10-21T13:00',
    },
    {
      start: '2026-10-22T08:00',
      end: '2026-10-22T10:00',
    },
    {
      start: '2026-10-23T13:00',
      end: '2026-10-23T15:00',
    },
    {
      start: '2026-10-24T15:00',
      end: '2026-10-24T17:00',
    },
    {
      start: '10:00',
      end: '11:00',
      recurring: {
        repeat: 'weekly',
        weekDays: 'TU,TH,SA,SU',
      },
    },
  ],
  colors: [
    {
      start: '2026-10-22T12:00',
      end: '2026-10-22T14:00',
      cssClass: 'mds-cell-summary-color',
    },
    {
      start: '2026-10-23T10:00',
      end: '2026-10-23T12:00',
      cssClass: 'mds-cell-summary-color',
    },
    {
      start: '2026-10-24T08:00',
      end: '2026-10-24T11:00',
      cssClass: 'mds-cell-summary-color',
    },
    {
      start: '2026-10-25T14:00',
      end: '2026-10-25T17:00',
      cssClass: 'mds-cell-summary-color',
    },
    {
      start: '08:00',
      end: '09:00',
      cssClass: 'mds-cell-summary-color',
      recurring: {
        repeat: 'weekly',
        weekDays: 'MO,FR',
      },
    },
    {
      start: '14:00',
      end: '16:00',
      cssClass: 'mds-cell-summary-color',
      recurring: {
        repeat: 'weekly',
        weekDays: 'TU,TH',
      },
    },
    {
      start: '10:00',
      end: '12:00',
      recurring: {
        repeat: 'weekly',
        weekDays: 'FR',
      },
      cssClass: 'mds-cell-summary-color',
    },
    {
      start: '16:00',
      end: '17:00',
      recurring: {
        repeat: 'weekly',
        weekDays: 'SU,SA',
      },
      cssClass: 'mds-cell-summary-color',
    },
  ],
  onCellHoverIn: function (args) {
    var endDate = new Date(args.date);
    endDate.setHours(endDate.getHours() + 1);
    var date = mobiscroll.formatDate('DDDD MMM D, YYYY, HA - ', args.date);
    var time = mobiscroll.formatDate('HA', endDate);

    cellDate.textContent = date + time;
    cellEventNr.textContent = args.events ? args.events.length : 0;
    cellInvalidNr.textContent = args.invalids ? args.invalids.length : 0;
    cellColorNr.textContent = args.colors ? args.colors.length : 0;

    tooltip.setOptions({
      anchor: args.target,
    });

    tooltip.open();
  },
  onCellHoverOut: function () {
    tooltip.close();
  },
});

var tooltip = mobiscroll.popup('#demo-cell-summary-popup', {
  display: 'anchored',
  showOverlay: false,
  touchUi: false,
  scrollLock: false,
});
```

### HTML

```html
<div id="demo-cell-summary-popup" style="display: none;">
  <div id="demo-cell-summary-date" class="mds-cell-summary-title"></div>
  <div class="mbsc-flex">
    <div class="mbsc-flex-1-0 mds-cell-summary-item">
      <div class="mbsc-txt-muted">Events</div>
      <div id="demo-cell-summary-events" class="mds-cell-summary-content"></div>
    </div>
    <div class="mbsc-flex-1-0 mds-cell-summary-item">
      <div class="mbsc-txt-muted">Invalid</div>
      <div id="demo-cell-summary-invalid" class="mds-cell-summary-content"></div>
    </div>
    <div class="mbsc-flex-1-0 mds-cell-summary-item">
      <div class="mbsc-txt-muted">Colors</div>
      <div id="demo-cell-summary-colors" class="mds-cell-summary-content"></div>
    </div>
  </div>
</div>
<div id="demo-show-cell-summary-on-hover" class="mds-cell-summary-on-hover"></div>
```

### CSS

```css
.mds-cell-summary-on-hover .mbsc-schedule-events.mbsc-ltr {
  right: 20px;
}
.mds-cell-summary-on-hover .mbsc-schedule-events.mbsc-rtl {
  left: 20px;
}
.mds-cell-summary-on-hover .mbsc-schedule-item:hover {
  box-shadow: 0px 1px 6px 3px rgba(0, 0, 0, 0.2), 0px 1px 6px 3px rgba(255, 255, 255, 0.2);
}
.mds-cell-summary-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}
.mds-cell-summary-item {
  flex: 1;
}
.mds-cell-summary-content {
  font-weight: 500;
  opacity: 0.8;
  margin-top: 5px;
}
.mds-cell-summary-color {    
  background: repeating-linear-gradient(-45deg, #cce9d3, #cce9d3 10px, #c5dfc1 10px, #c5dfc1 20px);
  opacity: 0.5;
}
```

## Implementation notes

- Use `view: { scheduler: { type: 'week', startTime: '08:00', endTime: '18:00', timeCellStep: 30 } }`. No resources - this is a single-column scheduler. No create or drag interactions.
- Define 17 events inline using `dyndatetime` offsets spread across the current week (day-3 through day+4). Define 5 `invalid` ranges (mix of specific date/time ranges and a recurring weekly rule for `TU,TH,SA,SU` at `10:00–11:00`). Define 8 `colors` entries (mix of specific ranges and recurring weekly rules), all using `cssClass: 'mds-cell-summary-color'` to render a striped pattern.
- **`onCellHoverIn`**: compute the cell's end time by creating a copy of `args.date` and calling `setHours(getHours() + 1)`. Format the date label as `formatDate('DDDD MMM D, YYYY, HA - ', args.date) + formatDate('HA', endDate)`. Read counts: `args.events?.length ?? 0`, `args.invalids?.length ?? 0`, `args.colors?.length ?? 0`. Open the tooltip anchored to `args.target`.
- **`onCellHoverOut`**: close the tooltip.
- **Tooltip popup**: `display: 'anchored'`, `showOverlay: false`, `touchUi: false`, `scrollLock: false`. Content: a title div showing the formatted date/time range, then a three-column flex row showing "Events", "Invalid", and "Colors" counts.
- **Anchor wiring**: bind `anchor` and `isOpen` as props, setting them from state in the hover callbacks; Angular: use `@ViewChild` to get the popup instance and call `.open()` / `.close()` directly; for the imperative API, instantiate the popup separately, then call `popup.setOptions({ anchor: args.target })` + `popup.open()` in `onCellHoverIn` and `popup.close()` in `onCellHoverOut`.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-javascript.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config javascript
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config javascript --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation

## Related demos

- Previous: [Resource Background Styling](https://demo.mobiscroll.com/javascript/scheduler/resource-background.md) - Color-code resources in a Javascript Scheduler with custom backgrounds and CSS classes — style headers, all-day areas, and grid columns per resource.