---
title: "Javascript Popup Using as a tooltip Example | Mobiscroll"
component: "Popup"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/popup/show-hide-tooltip-hover-in-out"
---
# Using as a tooltip - JavaScript Popup demo
Use the Javascript popup with custom content on event hover within the various event calendar views. Plain JavaScript API.
- [Live demo](https://demo.mobiscroll.com/javascript/popup/show-hide-tooltip-hover-in-out)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/pickers/popup/show-hide-tooltip-hover-in-out)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/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/javascript/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/javascript/popup/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/popup/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
- [`onEventHoverIn`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventHoverIn) - 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
- [`onEventHoverOut`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventHoverOut) - 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
- [`width`](https://mobiscroll.com/docs/javascript/popup/api#opt-width) - option
## Code
### JS
```js
mobiscroll.setOptions({
theme: 'ios',
themeVariant: 'light'
});
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);
});
```
### 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-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: [Event creation modal](https://demo.mobiscroll.com/javascript/popup/add-event-modal.md) - Use the Javascript 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/javascript/popup/range-picker-popup-presets.md) - Use the Javascript popup to create advanced range picker components with presets and more.