---
title: "JQuery Scheduler Event Tooltip Example | Mobiscroll"
component: "Scheduler"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/scheduler/custom-event-tooltip"
---

# Event Tooltip - jQuery Scheduler demo

Show native, custom, or third-party tooltips on JQuery Scheduler event hover — with appointment details and inline actions. For jQuery or jQuery Mobile.

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

## Description

There are several approaches to showing a tooltip when hovering events.

**The native tooltip**

By default, the calendar shows the browser native tooltip when hovering over the event. This includes the times and title of the event, which does the job most of the times. For showing a custom text use the [`tooltip`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-data) property of the data object. This tooltip is specific to every event. If you want to hide the native tooltip, you can set the [`showEventTooltip`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-showEventTooltip) to `false`.

**Fully custom tooltip**

Setting the [`showEventTooltip`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-showEventTooltip) to false gives room for a fully custom tooltip that can be implemented by using the [`onEventHoverIn`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventHoverIn) and [`onEventHoverOut`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventHoverOut) lifecycle events. With the help of the Mobiscroll popup you can show a custom tooltip that holds details, actions applicable to the event it is anchored to.

**Showing a third party popup**

There are cases when you are using a third party library, something like md-boostrap. For those cases, turn the browser native tooltip off with the [`showEventTooltip`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-showEventTooltip) option and use the third-party tooltip accordingly. In case of md-boostrap, you can add the tooltip directive to the [custom event template](https://demo.mobiscroll.com/jquery/scheduler/customizing-events) so that the library knows where and when to show the tooltip.

## What this demo shows

- A desktop weekly scheduler from Monday to Friday, with a fixed resource and week strip, repeated resources for each week, and a vertically scrollable time grid running from 8 AM to 4 PM.
- **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.
- **Resources with week view** The fixed strip below the header displays resources at the top and below that the weeks so in this case resources are grouped by resource which means for each resources appears the selected week.
- **Time grid** The scheduler shows 8-hours range from 8 AM to 4 PM and can be scrolled vertically.
- **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.
- **Current time** A blue current-time line appears across the time grid.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Custom event tooltip** Hovering over an event opens a custom tooltip below the hovered event.
- **Tooltip header** The tooltip header uses the event color and shows the patient name, age, and event start and end time.
- **Tooltip details** The tooltip body shows `Status`, `Reason for visiting`, and `Location` rows.
- **Appointment status** The `Status` row shows whether the appointment is confirmed.
- **Status action** The tooltip shows either a `Confirm appointment` or `Cancel appointment` button based on the current appointment status.
- **Status feedback** Clicking the status action changes the appointment status, closes the tooltip, and shows a toast message on the scheduler.
- **Reason for visiting** The tooltip includes a short description of why the patient is visiting.
- **Location** The tooltip shows the appointment location.
- **Footer actions** The footer includes a gray `View patient file` button and a red `Delete appointment` button.
- **View patient action** Clicking `View patient file` shows a toast message with the `View file` text.
- **Delete action** Clicking `Delete appointment` removes the event.
- **Event selection** Clicking an event selects and highlights it.

## Best for

- **Appointment schedulers** Showing patient appointments with status, reason, location, and event-specific actions.
- **Healthcare scheduling** Building scheduler views where users need quick access to appointment details without opening a separate page.
- **Desktop workflows** Presenting a weekly scheduler layout with hover states, selection states, and header navigation.
- **Event detail previews** Displaying structured event information in a custom tooltip anchored to the hovered event.
- **Inline appointment actions** Letting users confirm, cancel, view, or delete appointments directly from the scheduler.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-themeVariant) - option
- [`setOptions`](https://mobiscroll.com/docs/jquery/popup/api#method-setOptions) - method
- [`anchor`](https://mobiscroll.com/docs/jquery/popup/api#opt-anchor) - option
- [`open`](https://mobiscroll.com/docs/jquery/popup/api#method-open) - method
- [`view`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-data) - option
- [`clickToCreate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToResize) - option
- [`resources`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-resources) - option
- [`showEventTooltip`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-showEventTooltip) - option
- [`onEventDragStart`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventDragStart) - event
- [`close`](https://mobiscroll.com/docs/jquery/popup/api#method-close) - method
- [`onEventClick`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventClick) - event
- [`onEventHoverIn`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventHoverIn) - event
- [`onEventHoverOut`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventHoverOut) - event
- [`display`](https://mobiscroll.com/docs/jquery/popup/api#opt-display) - option
- [`scrollLock`](https://mobiscroll.com/docs/jquery/popup/api#opt-scrollLock) - option
- [`showOverlay`](https://mobiscroll.com/docs/jquery/popup/api#opt-showOverlay) - option
- [`touchUi`](https://mobiscroll.com/docs/jquery/popup/api#opt-touchUi) - option
- [`width`](https://mobiscroll.com/docs/jquery/popup/api#opt-width) - option
- [`updateEvent`](https://mobiscroll.com/docs/jquery/eventcalendar/api#method-updateEvent) - method
- [`removeEvent`](https://mobiscroll.com/docs/jquery/eventcalendar/api#method-removeEvent) - method

## Code

### JS

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

$(function () {
  function openTooltip(args) {
    var formatDate = mobiscroll.formatDate;
    var event = args.event;
    var doctor = args.resourceObj;
    var time = formatDate('hh:mm A', new Date(event.start)) + ' - ' + formatDate('hh:mm A', new Date(event.end));
    var buttonText;
    var buttonType;

    if (event.confirmed) {
      buttonText = 'Cancel appointment';
      buttonType = 'warning';
    } else {
      buttonText = 'Confirm appointment';
      buttonType = 'success';
    }

    appointment = event;
    $appointmentInfo.text(event.title + ', Age: ' + event.age);
    $appointmentLocation.text(event.location);
    $appointmentReason.text(event.reason);
    $appointmentTime.text(time);
    $appointmentStatus.text(event.confirmed ? 'Confirmed' : 'Canceled');

    $btnStatus.find('.mbsc-button-txt').text(buttonText);
    $btnStatus.mobiscroll('setOptions', { color: buttonType });

    $tooltipHeader.css('background-color', doctor.color);

    clearTimeout(timer);
    timer = null;

    tooltip.setOptions({ anchor: args.domEvent.target.closest('.mbsc-schedule-event') });
    tooltip.open();
  }

  var appointment;
  var $appointmentInfo = $('#demo-tooltip-info');
  var $appointmentLocation = $('#demo-tooltip-location');
  var $appointmentReason = $('#demo-tooltip-reason');
  var $appointmentStatus = $('#demo-tooltip-status');
  var $appointmentTime = $('#demo-tooltip-time');
  var $btnDelete = $('#demo-tooltip-delete');
  var $btnStatus = $('#demo-tooltip-status-update');
  var $btnView = $('#demo-tooltip-view');
  var timer;
  var $tooltip = $('#demo-tooltip-popup');
  var $tooltipHeader = $('#demo-tooltip-header');

  var doctors = [
    { id: 1, name: 'Dr. Breanne Lorinda', color: '#b33d3d' },
    { id: 2, name: 'Dr. Ryan Melicent', color: '#309346' },
    { id: 3, name: 'Dr. Meredith Chantelle', color: '#c77c0a' },
  ];

  var calendar = $('#demo-tooltip-calendar')
    .mobiscroll()
    .eventcalendar({
      view: {
        scheduler: {
          type: 'week',
          startDay: 1,
          endDay: 5,
          startTime: '08:00',
          endTime: '16:00',
          allDay: false,
        },
      },
      data: [
        {
          title: 'Jude Chester',
          age: 69,
          start: '2026-10-20T08:00',
          end: '2026-10-20T08:45',
          confirmed: false,
          reason: 'Headaches morning & afternoon',
          location: 'Topmed, Building A, Room 203',
          resource: 1,
        },
        {
          title: 'Leon Porter',
          age: 44,
          start: '2026-10-20T09:00',
          end: '2026-10-20T09:45',
          confirmed: false,
          reason: 'Left abdominal pain',
          location: 'Topmed, Building D, Room 360',
          resource: 1,
        },
        {
          title: 'Merv Kenny',
          age: 56,
          start: '2026-10-20T10:00',
          end: '2026-10-20T10:45',
          confirmed: true,
          reason: 'Itchy, red rashes',
          location: 'Topmed, Building D, Room 360',
          resource: 1,
        },
        {
          title: 'Derek Austyn',
          age: 72,
          start: '2026-10-20T13:00',
          end: '2026-10-20T13:45',
          confirmed: false,
          reason: 'Nausea & weakness',
          location: 'Rose Medical Center, Room 18',
          resource: 1,
        },
        {
          title: 'Jenifer Kalyn',
          age: 65,
          start: '2026-10-20T14:00',
          end: '2026-10-20T14:45',
          confirmed: true,
          reason: 'Cough & fever',
          location: 'Rose Medical Center, Room 18',
          resource: 1,
        },
        {
          title: 'Lily Racquel',
          age: 54,
          start: '2026-10-20T10:00',
          end: '2026-10-20T10:45',
          confirmed: true,
          reason: 'Dry, persistent cough & headache',
          location: 'Procare, Building C, Room 12',
          resource: 2,
        },
        {
          title: 'Mia Sawyer',
          age: 59,
          start: '2026-10-20T11:00',
          end: '2026-10-20T11:45',
          confirmed: true,
          reason: 'Difficulty sleeping & loss of appetite',
          location: 'Procare, Building C, Room 12',
          resource: 2,
        },
        {
          title: 'Fred Valdez',
          age: 62,
          start: '2026-10-20T15:00',
          end: '2026-10-20T15:45',
          confirmed: false,
          reason: 'High blood pressure',
          location: 'Procare, Building C, Room 40',
          resource: 2,
        },
        {
          title: 'Sylvia Cale',
          age: 41,
          start: '2026-10-20T08:00',
          end: '2026-10-20T08:45',
          confirmed: false,
          reason: 'Fever & sore throat',
          location: 'MedStar, Building A, Room 1',
          resource: 3,
        },
        {
          title: 'Isadora Lyric',
          age: 30,
          start: '2026-10-20T09:00',
          end: '2026-10-20T09:45',
          confirmed: false,
          reason: 'Constant tiredness & weakness',
          location: 'MedStar, Building A, Room 1',
          resource: 3,
        },
        {
          title: 'Jon Candace',
          age: 63,
          start: '2026-10-20T12:00',
          end: '2026-10-20T12:45',
          confirmed: true,
          reason: 'Nausea & weakness',
          location: 'MedStar, Building A, Room 1',
          resource: 3,
        },
        {
          title: 'Layton Drake',
          age: 57,
          start: '2026-10-20T13:00',
          end: '2026-10-20T13:45',
          confirmed: true,
          reason: 'Headaches & loss of appetite',
          location: 'Vitalife, Room 160',
          resource: 3,
        },
        {
          title: 'Florence Amy',
          age: 73,
          start: '2026-10-20T14:00',
          end: '2026-10-20T14:45',
          confirmed: false,
          reason: 'Dry, persistent cough & headache',
          location: 'Vitalife, Room 160',
          resource: 3,
        },
        {
          title: 'Willis Kane',
          age: 44,
          start: '2026-10-21T08:00',
          end: '2026-10-21T08:45',
          confirmed: true,
          reason: 'Back pain',
          location: 'Care Cente, Room 320r',
          resource: 1,
        },
        {
          title: 'Theo Calanthia',
          age: 60,
          start: '2026-10-21T09:00',
          end: '2026-10-21T09:45',
          confirmed: true,
          reason: 'Anxiousness & sleeping disorder',
          location: 'Care Center, Room 320',
          resource: 1,
        },
        {
          title: 'Ford Kaiden',
          age: 53,
          start: '2026-10-21T14:00',
          end: '2026-10-21T14:45',
          confirmed: true,
          reason: 'Nausea & vomiting',
          location: 'Care Center, Room 206',
          resource: 1,
        },
        {
          title: 'Jewell Ryder',
          age: 75,
          start: '2026-10-21T15:00',
          end: '2026-10-21T15:45',
          confirmed: false,
          reason: 'High blood pressure',
          location: 'Care Center, Room 206',
          resource: 1,
        },
        {
          title: 'Antonia Cindra',
          age: 48,
          start: '2026-10-21T12:00',
          end: '2026-10-21T12:45',
          confirmed: true,
          reason: 'Dry, persistent cough',
          location: 'Medica Zone, Building C, Room 2',
          resource: 3,
        },
        {
          title: 'Gerry Irma',
          age: 50,
          start: '2026-10-21T13:00',
          end: '2026-10-21T13:45',
          confirmed: false,
          reason: 'Fever & sore throat',
          location: 'Medica Zone, Building C, Room 2',
          resource: 3,
        },
        {
          title: 'Carlyn Dorothy',
          age: 36,
          start: '2026-10-21T14:00',
          end: '2026-10-21T14:45',
          confirmed: true,
          reason: 'Tiredness & muscle pain',
          location: 'Medica Zone, Building C, Room 2',
          resource: 3,
        },
        {
          title: 'Alma Potter',
          age: 74,
          start: '2026-10-19T10:00',
          end: '2026-10-19T10:45',
          confirmed: true,
          reason: 'High blood pressure',
          location: 'Vitacure, Building D, Room 2',
          resource: 1,
        },
        {
          title: 'Debra Aguilar',
          age: 47,
          start: '2026-10-19T11:00',
          end: '2026-10-19T11:45',
          confirmed: false,
          reason: 'Fever & sore throat',
          location: 'Vitacure, Building D, Room 2',
          resource: 1,
        },
        {
          title: 'Tommie Love',
          age: 42,
          start: '2026-10-19T12:00',
          end: '2026-10-19T12:45',
          confirmed: false,
          reason: 'Dry, persistent cough & headache',
          location: 'Vitacure, Building D, Room 2',
          resource: 1,
        },
        {
          title: 'Marjorie White',
          age: 55,
          start: '2026-10-19T13:00',
          end: '2026-10-19T13:45',
          confirmed: true,
          reason: 'Back pain',
          location: 'Vitacure, Building D, Room 2',
          resource: 1,
        },
        {
          title: 'Brandon Perkins',
          age: 68,
          start: '2026-10-19T14:00',
          end: '2026-10-19T14:45',
          confirmed: true,
          reason: 'Swollen ankles',
          location: 'Vitacure, Building D, Room 2',
          resource: 1,
        },
        {
          title: 'Lora Wilson',
          age: 66,
          start: '2026-10-19T15:00',
          end: '2026-10-19T15:45',
          confirmed: false,
          reason: 'Fever & headache',
          location: 'Vitacure, Building D, Room 2',
          resource: 1,
        },
        {
          title: 'Ismael Bates',
          age: 58,
          start: '2026-10-19T08:00',
          end: '2026-10-19T08:45',
          confirmed: false,
          reason: 'Tiredness & muscle pain',
          location: 'Care Center, Room 300',
          resource: 2,
        },
        {
          title: 'Archie Wilkins',
          age: 69,
          start: '2026-10-19T09:00',
          end: '2026-10-19T09:45',
          confirmed: true,
          reason: 'Fever & headache',
          location: 'Care Center, Room 300',
          resource: 2,
        },
        {
          title: 'Christie Baker',
          age: 71,
          start: '2026-10-19T10:00',
          end: '2026-10-19T10:45',
          confirmed: true,
          reason: 'Headaches morning & afternoon',
          location: 'Care Center, Room 300',
          resource: 2,
        },
        {
          title: 'Laura Shelton',
          age: 45,
          start: '2026-10-19T12:00',
          end: '2026-10-19T12:45',
          confirmed: false,
          reason: 'Dry, persistent cough',
          location: 'Care Center, Room 300',
          resource: 2,
        },
        {
          title: 'Mary Hudson',
          age: 77,
          start: '2026-10-19T09:00',
          end: '2026-10-19T09:45',
          confirmed: true,
          reason: 'Fever & sore throat',
          location: 'Medica Zone, Room 45',
          resource: 3,
        },
        {
          title: 'Ralph Rice',
          age: 64,
          start: '2026-10-19T10:00',
          end: '2026-10-19T10:45',
          confirmed: true,
          reason: 'Left abdominal pain',
          location: 'Medica Zone, Room 45',
          resource: 3,
        },
        {
          title: 'Marc Hoffman',
          age: 53,
          start: '2026-10-19T12:00',
          end: '2026-10-19T12:45',
          confirmed: true,
          reason: 'Dry, persistent cough & headache',
          location: 'Medica Zone, Room 45',
          resource: 3,
        },
        {
          title: 'Arlene Lyons',
          age: 41,
          start: '2026-10-19T14:00',
          end: '2026-10-19T14:45',
          confirmed: true,
          reason: 'Nausea & weakness',
          location: 'Care Center, Room 202',
          resource: 3,
        },
        {
          title: 'Thelma Shaw',
          age: 26,
          start: '2026-10-19T15:00',
          end: '2026-10-19T15:45',
          confirmed: true,
          reason: 'Anxiousness & sleeping disorder',
          location: 'Care Center, Room 202',
          resource: 3,
        },
        {
          title: 'Dory Edie',
          age: 45,
          start: '2026-10-18T09:00',
          end: '2026-10-18T09:45',
          confirmed: true,
          reason: 'Right abdominal pain',
          location: 'Vitacure, Building A, Room 203',
          resource: 2,
        },
        {
          title: 'Kaylin Toni',
          age: 68,
          start: '2026-10-18T10:00',
          end: '2026-10-18T10:45',
          confirmed: true,
          reason: 'Itchy, red rashes',
          location: 'Vitacure, Building A, Room 203',
          resource: 2,
        },
        {
          title: 'Gray Kestrel',
          age: 60,
          start: '2026-10-18T12:00',
          end: '2026-10-18T12:45',
          confirmed: true,
          reason: 'Cough & fever',
          location: 'Vitacure, Building A, Room 203',
          resource: 2,
        },
        {
          title: 'Reg Izabelle',
          age: 41,
          start: '2026-10-18T14:00',
          end: '2026-10-18T14:45',
          confirmed: true,
          reason: 'Fever & headache',
          location: 'Medica Zone, Room 13',
          resource: 2,
        },
        {
          title: 'Lou Andie',
          age: 76,
          start: '2026-10-18T15:00',
          end: '2026-10-18T15:45',
          confirmed: true,
          reason: 'High blood pressure',
          location: 'Medica Zone, Room 13',
          resource: 2,
        },
        {
          title: 'Yancy Dustin',
          age: 52,
          start: '2026-10-18T10:00',
          end: '2026-10-18T10:45',
          confirmed: true,
          reason: 'Fever & headache',
          location: 'Vitacure, Building E, Room 50',
          resource: 3,
        },
        {
          title: 'Terry Clark',
          age: 78,
          start: '2026-10-18T11:00',
          end: '2026-10-18T11:45',
          confirmed: true,
          reason: 'Swollen ankles',
          location: 'Vitacure, Building E, Room 50',
          resource: 3,
        },
      ],
      clickToCreate: false,
      dragToCreate: false,
      dragToMove: true,
      dragToResize: false,
      resources: doctors,
      showEventTooltip: false,
      onEventDragStart: function () {
        tooltip.close();
      },
      onEventClick: openTooltip,
      onEventHoverIn: openTooltip,
      onEventHoverOut: function () {
        if (!timer) {
          timer = setTimeout(function () {
            tooltip.close();
          }, 200);
        }
      },
    })
    .mobiscroll('getInst');

  var tooltip = $tooltip
    .mobiscroll()
    .popup({
      contentPadding: false,
      display: 'anchored',
      scrollLock: false,
      showOverlay: false,
      touchUi: false,
      width: 350,
    })
    .mobiscroll('getInst');

  $tooltip.on('mouseenter', function () {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
  });

  $tooltip.on('mouseleave', function () {
    timer = setTimeout(function () {
      tooltip.close();
    }, 200);
  });

  $btnStatus.on('click', function () {
    appointment.confirmed = !appointment.confirmed;
    calendar.updateEvent(appointment);
    tooltip.close();
    mobiscroll.toast({
      message: 'Appointment ' + (appointment.confirmed ? 'confirmed' : 'canceled'),
    });
  });

  $btnView.on('click', function () {
    tooltip.close();
    mobiscroll.toast({
      message: 'View file',
    });
  });

  $btnDelete.on('click', function () {
    calendar.removeEvent(appointment);
    tooltip.close();
    mobiscroll.toast({
      message: 'Appointment deleted',
    });
  });
});
```

### HTML

```html
<div id="demo-tooltip-calendar"></div>
<div id="demo-tooltip-popup" class="mds-tooltip mds-popup">
  <div id="demo-tooltip-header" class="mds-tooltip-header">
    <span id="demo-tooltip-info"></span>
    <span id="demo-tooltip-time" class="mbsc-pull-right"></span>
  </div>
  <div class="mbsc-padding">
    <div class="mds-tooltip-label mbsc-margin">
      Status: <span id="demo-tooltip-status" class="mbsc-light"></span>
      <button id="demo-tooltip-status-update" mbsc-button data-color="warning" data-variant="outline" class="mds-tooltip-button mbsc-pull-right">
      </button>
    </div>
    <div class="mds-tooltip-label mbsc-margin">Reason for visit: <span id="demo-tooltip-reason" class="mbsc-light"></span></div>
    <div class="mds-tooltip-label mbsc-margin">Location: <span id="demo-tooltip-location" class="mbsc-light"></span></div>
    <button id="demo-tooltip-view" mbsc-button data-color="secondary" class="mds-tooltip-button">
      View patient file
    </button>
    <button id="demo-tooltip-delete" mbsc-button data-color="danger" data-variant="outline" class="mds-tooltip-button mbsc-pull-right">
      Delete appointment
    </button>
  </div>
</div>
```

### CSS

```css
.mds-tooltip {
  font-size: 15px;
  font-weight: 600;
}

.mds-tooltip-header {
  padding: 12px 16px;
  color: #eee;
}

.mds-tooltip-label {
  line-height: 32px;
}

.mds-tooltip-button.mbsc-button {
  font-size: 16px;
  margin: 0;
  line-height: 32px;
  padding-top: 0;
  padding-bottom: 0;
}

.mds-tooltip-button .mbsc-button-txt {
  font-size: 14px;
  padding-left: 0;
  padding-right: 0;
}
```

## Implementation notes

- Use `view: { scheduler: { type: 'week', startDay: 1, endDay: 5, startTime: '08:00', endTime: '16:00', allDay: false } }` - Mon-Fri, 8am-4pm.
- Define 3 doctor resources, each with `id`, `name`, and `color`. Each appointment event carries custom properties: `age`, `confirmed` (boolean), `reason`, and `location`, in addition to `title`, `start`, `end`, and `resource`.
- Set `showEventTooltip: false` to suppress the native browser tooltip. Set `dragToMove: true`.
- Use a `Popup` component as the custom tooltip. Configure it with `display="anchored"`, `showOverlay={false}`, `scrollLock={false}`, `touchUi={false}`, `contentPadding={false}`. The `anchor` prop is set dynamically to the hovered event's DOM element via `args.domEvent.target.closest('.mbsc-schedule-event')`.
- **Tooltip open/close logic** - use a shared timer ref to bridge the gap between the event element and the popup:
  - `onEventHoverIn` / `onEventClick`: clear any pending close timer, populate popup state from `args.event` and `args.resourceObj` (color), format the time range with `formatDate`, set anchor, open.
  - `onEventHoverOut`: start a 200ms timer to close.
  - Mouse-enter on the popup: clear the close timer. Mouse-leave on the popup: start a 200ms close timer.
  - `onEventDragStart`: close immediately.
- **Popup content**: colored header with patient name, age, and appointment time; status (Confirmed/Canceled) with a toggle button; reason for visit; location; "View patient file" and "Delete appointment" buttons. Use a `Toast` to confirm actions.

## 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-jquery.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 jquery
   ```

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

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

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

## Related demos

- Next: [Event Rendering](https://demo.mobiscroll.com/jquery/scheduler/customizing-events.md) - Render custom event cards in the JQuery Scheduler — add color stripes, labels, avatars, action buttons, and travel-time buffers. For jQuery or jQuery Mobile.