--- title: "JQuery Popup Using as a tooltip Example | Mobiscroll" component: "Popup" framework: "jQuery" library_version: "6.2.0" url: "https://demo.mobiscroll.com/jquery/popup/show-hide-tooltip-hover-in-out" --- # Using as a tooltip - jQuery Popup demo Use the JQuery popup with custom content on event hover within the various event calendar views. - [Live demo](https://demo.mobiscroll.com/jquery/popup/show-hide-tooltip-hover-in-out) - [View code on GitHub](https://github.com/acidb/mobiscroll-demos-jquery/tree/main/src/demos/pickers/popup/show-hide-tooltip-hover-in-out) - This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/popup/show-hide-tooltip-hover-in-out.md), [Angular](https://demo.mobiscroll.com/angular/popup/show-hide-tooltip-hover-in-out.md), [React](https://demo.mobiscroll.com/react/popup/show-hide-tooltip-hover-in-out.md), [Vue](https://demo.mobiscroll.com/vue/popup/show-hide-tooltip-hover-in-out.md) ## Description 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 →](https://demo.mobiscroll.com/jquery/scheduler/custom-event-tooltip) ## What this demo shows - A desktop-style monthly event calendar view with event labels rendered inside day cells. - **Event labels** Events are shown as labels, with different visual styles based on the event type or event data. - **Event selection** Clicking an event label highlights the selected event. - **Day hover state** Hovering over a day cell highlights the day number with a gray background. - **Day selection** Clicking an empty area of a day cell selects that day and highlights the day number with a blue background. - **Calendar header** The top-left side shows the current month and year, while the top-right side includes blue previous and next navigation arrows with a `Today` button between them. - **Drag navigation** The calendar can be dragged left or right to navigate between weeks. - **Custom event tooltip** Hovering over an event opens a popup as a tooltip below the hovered event. - **Tooltip header** The tooltip header shows the title of the event. - **Tooltip details** The tooltip body shows the exact start end and time of the hovered event. ## Best for - **Appointment calendars** Showin appointments with exact start and end time. - **Healthcare scheduling** Building calendar views where users need quick access to appointment details without opening a separate page. - **Event detail previews** Displaying structured event information in a custom tooltip anchored to the hovered event. ## API used in this demo - [`theme`](https://mobiscroll.com/docs/jquery/popup/api#opt-theme) - option - [`themeVariant`](https://mobiscroll.com/docs/jquery/popup/api#opt-themeVariant) - option - [`view`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-view) - option - [`data`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-data) - option - [`onEventHoverIn`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventHoverIn) - event - [`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 - [`onEventHoverOut`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventHoverOut) - event - [`close`](https://mobiscroll.com/docs/jquery/popup/api#method-close) - method - [`display`](https://mobiscroll.com/docs/jquery/popup/api#opt-display) - option - [`showOverlay`](https://mobiscroll.com/docs/jquery/popup/api#opt-showOverlay) - option - [`width`](https://mobiscroll.com/docs/jquery/popup/api#opt-width) - option ## Code ### JS ```js mobiscroll.setOptions({ theme: 'ios', themeVariant: 'light' }); $(function () { var formatDate = mobiscroll.formatDate; var timer; var $tooltip = $('#demo-event-tooltip-popup'); var $title = $('#demo-tooltip-event-title'); var $startDate = $('#demo-tooltip-event-start'); var $endDate = $('#demo-tooltip-event-end'); var myEvents = [ { title: 'CEO Strategy Meeting', start: '2026-11-01T10:00', end: '2026-11-01T11:00', color: '#FF5733', }, { title: 'Board of Directors Briefing', start: '2026-11-03T14:00', end: '2026-11-03T15:00', color: '#33C4FF', }, { title: 'Quarterly Review', start: '2026-11-05T09:00', end: '2026-11-05T10:00', color: '#33FF77', }, { title: 'Executive Team Lunch', start: '2026-11-07T12:00', end: '2026-11-07T13:00', color: '#FFC733', }, { title: 'Investor Meeting', start: '2026-11-10T11:00', end: '2026-11-10T12:00', color: '#9B59B6', }, { title: 'Product Launch Review', start: '2026-11-12T13:00', end: '2026-11-12T14:00', color: '#FF6347', }, { title: 'Press Conference Preparation', start: '2026-11-14T16:00', end: '2026-11-14T17:00', color: '#1E90FF', }, { title: 'Client Partnership Discussion', start: '2026-11-18T10:00', end: '2026-11-18T11:00', color: '#FFD700', }, { title: 'CEO’s Weekly Report', start: '2026-11-20T09:00', end: '2026-11-20T10:00', color: '#20B2AA', }, { title: 'Town Hall Meeting', start: '2026-11-25T14:00', end: '2026-11-25T15:00', color: '#FF4500', }, ]; $('#demo-event-tooltip-calendar') .mobiscroll() .eventcalendar({ view: { calendar: { type: 'month', }, }, data: myEvents, onEventHoverIn: function (args) { var event = args.event; $title.text(event.title); $startDate.text(formatDate('hh:mm A', new Date(event.start))); $endDate.text(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); } }, }) .mobiscroll('getInst'); var tooltip = $tooltip .mobiscroll() .popup({ display: 'anchored', showOverlay: false, width: 250, }) .mobiscroll('getInst'); $tooltip.on('mouseenter', function () { if (timer) { clearTimeout(timer); timer = null; } }); $tooltip.on('mouseleave', function () { timer = setTimeout(function () { tooltip.close(); }, 200); }); }); ``` ### HTML ```html
``` ### CSS ```css .mds-tooltip-event-title-cont { margin-bottom: 15px; text-align: center; font-size: 16px; } .mds-tooltip-start-cont, .mds-tooltip-end-cont { justify-content: space-between; margin-bottom: 5px; font-size: 14px; padding: 5px 0; border-bottom: 1px solid #ddd; } .mds-tooltip-label { font-weight: 600; } ``` ## Implementation notes - `Eventcalendar`'s `onEventHoverIn`/`(onEventHoverIn)`/`@event-hover-in` fires when the pointer enters an event; its handler reads `args.event` for the title/start/end and `args.domEvent.target` for the hovered element, formats the times with `formatDate('hh:mm A', ...)`, and opens the tooltip popup anchored to that element (`anchor`/`[anchor]`/`:anchor` set to the target, then `isOpen`/`:isOpen` set `true` in React/Vue or `popup.open()` called in Angular/JS after clearing any pending close timer). - `onEventHoverOut`/`(onEventHoverOut)`/`@event-hover-out` doesn't close the popup immediately - it starts a `setTimeout` (200ms) that hides it (`isOpen = false` / `popup.close()`), giving the pointer time to move from the event onto the tooltip itself without it flickering closed. - The tooltip content wraps its own `mouseenter`/`mouseleave` handlers (`onMouseEnter`/`onMouseLeave` in React, `@mouseenter`/`@mouseleave` in Vue, `(mouseenter)`/`(mouseleave)` in Angular): entering the tooltip clears the pending close timeout so it stays open; leaving it restarts the same 200ms close timer, so the two hover targets (event + tooltip) act as one continuous hover region. - `Popup` options for the tooltip: `display: 'anchored'`, `touchUi: false` (keeps it in anchored/popover mode even in touch environments, since it's not meant to become a mobile action sheet), `showOverlay: false` (no dimmed backdrop, since it's a lightweight tooltip, not a modal), and `width: 250`. - `Popup` has no `buttons` option set - it's dismiss-only via hover-out, with no footer actions. - `Eventcalendar`'s `view` is `{ calendar: { type: 'month' } }`, rendering the month grid that the tooltip is anchored against. ## 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 ``` On a trial, add `--trial` to the config command: `mobiscroll config jquery --trial`. 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 - Previous: [Event creation modal](https://demo.mobiscroll.com/jquery/popup/add-event-modal.md) - Use the JQuery popup for event add/edit modals. Trigger within the event calendar component and load your own custom forms. - Next: [Range picker with presets](https://demo.mobiscroll.com/jquery/popup/range-picker-popup-presets.md) - Use the JQuery popup to create advanced range picker components with presets and more.