Using as a tooltip

Use the popup as a tooltip that gives a quick glance at more event details than just the labels. This approach is perfect for providing access to information without cluttering the interface.

The popup takes care of auto-positioning, taking the guesswork out of where it should show up. It also gives you full control over the content where you can use any Mobiscroll or custom component.

Looking for more advanced event tooltip ideas?  Check out this example →
Download and try example

Demo

Loading the live demo

Preview in full screen

Code

View code on GitHub 
mobiscroll.setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

var formatDate = mobiscroll.formatDate;
var timer;
var tooltipElm = document.getElementById('demo-event-tooltip-popup');
var title = document.getElementById('demo-tooltip-event-title');
var startDate = document.getElementById('demo-tooltip-event-start');
var endDate = document.getElementById('demo-tooltip-event-end');

var myEvents = [
  {
    title: 'CEO Strategy Meeting',
    start: '2026-10-01T10:00',
    end: '2026-10-01T11:00',
    color: '#FF5733',
  },
  {
    title: 'Board of Directors Briefing',
    start: '2026-10-03T14:00',
    end: '2026-10-03T15:00',
    color: '#33C4FF',
  },
  {
    title: 'Quarterly Review',
    start: '2026-10-05T09:00',
    end: '2026-10-05T10:00',
    color: '#33FF77',
  },
  {
    title: 'Executive Team Lunch',
    start: '2026-10-07T12:00',
    end: '2026-10-07T13:00',
    color: '#FFC733',
  },
  {
    title: 'Investor Meeting',
    start: '2026-10-10T11:00',
    end: '2026-10-10T12:00',
    color: '#9B59B6',
  },
  {
    title: 'Product Launch Review',
    start: '2026-10-12T13:00',
    end: '2026-10-12T14:00',
    color: '#FF6347',
  },
  {
    title: 'Press Conference Preparation',
    start: '2026-10-14T16:00',
    end: '2026-10-14T17:00',
    color: '#1E90FF',
  },
  {
    title: 'Client Partnership Discussion',
    start: '2026-10-18T10:00',
    end: '2026-10-18T11:00',
    color: '#FFD700',
  },
  {
    title: 'CEO’s Weekly Report',
    start: '2026-10-20T09:00',
    end: '2026-10-20T10:00',
    color: '#20B2AA',
  },
  {
    title: 'Town Hall Meeting',
    start: '2026-10-25T14:00',
    end: '2026-10-25T15:00',
    color: '#FF4500',
  },
];

mobiscroll.eventcalendar('#demo-event-tooltip-calendar', {
  view: {
    calendar: {
      type: 'month',
    },
  },
  data: myEvents,
  onEventHoverIn: function (args) {
    var event = args.event;
    title.textContent = event.title;
    startDate.textContent = formatDate('hh:mm A', new Date(event.start));
    endDate.textContent = formatDate('hh:mm A', new Date(event.end));

    clearTimeout(timer);
    timer = null;

    tooltip.setOptions({ anchor: args.domEvent.target });
    tooltip.open();
  },
  onEventHoverOut: function () {
    if (!timer) {
      timer = setTimeout(function () {
        tooltip.close();
      }, 200);
    }
  },
});

var tooltip = mobiscroll.popup(tooltipElm, {
  display: 'anchored',
  showOverlay: false,
  width: 250,
});

tooltipElm.addEventListener('mouseenter', function () {
  if (timer) {
    clearTimeout(timer);
    timer = null;
  }
});

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

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.