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 →
Get started with this example

Demo

Loading the live demo

Preview in full screen

Code

View code on GitHub 
import { Eventcalendar, formatDate, Page, Popup, setOptions  } from '@mobiscroll/react';
import { useCallback, useMemo, useRef, useState } from 'react';

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

function App() {
  const myEvents = useMemo(
    () => [
      {
        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',
      },
    ],
    [],
  );

  const [isPopupOpen, setPopupOpen] = useState(false);
  const [myAnchor, setAnchor] = useState();
  const [eventTitle, setEventTitle] = useState({});
  const [eventStart, setEventStart] = useState({});
  const [eventEnd, setEventEnd] = useState({});
  const timerRef = useRef(null);

  const handleEventHoverIn = useCallback((args) => {
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }
    setEventTitle(args.event.title);
    setEventStart(formatDate('hh:mm A', new Date(args.event.start)));
    setEventEnd(formatDate('hh:mm A', new Date(args.event.end)));
    setAnchor(args.domEvent.target);
    setPopupOpen(true);
  }, []);

  const handleEventHoverOut = useCallback(() => {
    timerRef.current = setTimeout(() => {
      setPopupOpen(false);
    }, 200);
  }, []);

  const handleMouseEnter = useCallback(() => {
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }
  }, []);

  const handleMouseLeave = useCallback(() => {
    timerRef.current = setTimeout(() => {
      setPopupOpen(false);
    }, 200);
  }, []);

  const myView = useMemo(
    () => ({
      calendar: { type: 'month' },
    }),
    [],
  );

  return (
    <Page>
      <Eventcalendar data={myEvents} view={myView} onEventHoverIn={handleEventHoverIn} onEventHoverOut={handleEventHoverOut} />
      <Popup display="anchored" anchor={myAnchor} touchUi={false} isOpen={isPopupOpen} width={250} showOverlay={false}>
        <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
          <div className="mds-tooltip-event-title-cont">
            <span>{eventTitle}</span>
          </div>
          <div className="mds-tooltip-start-cont mbsc-flex">
            <span className="mds-tooltip-label">Start:</span>
            <span>{eventStart}</span>
          </div>
          <div className="mds-tooltip-end-cont mbsc-flex">
            <span className="mds-tooltip-label">End:</span>
            <span>{eventEnd}</span>
          </div>
        </div>
      </Popup>
    </Page>
  );
}

export default App;

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.