---
title: "Vue Popup Using as a tooltip Example | Mobiscroll"
component: "Popup"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/popup/show-hide-tooltip-hover-in-out"
---

# Using as a tooltip - Vue Popup demo

Use the Vue popup with custom content on event hover within the various event calendar views. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/popup/show-hide-tooltip-hover-in-out)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/pickers/popup/show-hide-tooltip-hover-in-out)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/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), [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)

## 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/vue/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/vue/popup/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/popup/api#opt-themeVariant) - option
- [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-data) - option
- [`event-hover-in`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventHoverIn) - event
- [`event-hover-out`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventHoverOut) - event
- [`display`](https://mobiscroll.com/docs/vue/popup/api#opt-display) - option
- [`anchor`](https://mobiscroll.com/docs/vue/popup/api#opt-anchor) - option
- [`isOpen`](https://mobiscroll.com/docs/vue/popup/api#opt-isOpen) - option
- [`touchUi`](https://mobiscroll.com/docs/vue/popup/api#opt-touchUi) - option
- [`showOverlay`](https://mobiscroll.com/docs/vue/popup/api#opt-showOverlay) - option
- [`width`](https://mobiscroll.com/docs/vue/popup/api#opt-width) - option

## Code

### SFC JS

```vue
<script setup>
import {
  formatDate,
  MbscEventcalendar,
  MbscPage,
  MbscPopup,
  setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const myEvents = ref([
  {
    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 = ref(false)
const myAnchor = ref()
const eventTitle = ref()
const eventStart = ref()
const eventEnd = ref()
const timer = ref()

function handleEventHoverIn(args) {
  const event = args.event

  eventTitle.value = event.title
  eventStart.value = formatDate('hh:mm A', new Date(event.start))
  eventEnd.value = formatDate('hh:mm A', new Date(event.end))

  clearTimeout(timer.value)
  timer.value = null

  myAnchor.value = args.domEvent.target
  isPopupOpen.value = true
}

function handleEventHoverout() {
  if (!timer.value) {
    timer.value = setTimeout(() => {
      isPopupOpen.value = false
    }, 200)
  }
}

function mouseEnter() {
  if (timer.value) {
    clearTimeout(timer.value)
    timer.value = null
  }
}

function mouseLeave() {
  timer.value = setTimeout(() => {
    isPopupOpen.value = false
  }, 200)
}

const myView = ref({
  calendar: {
    type: 'month'
  }
})
</script>

<template>
  <MbscPage>
    <MbscEventcalendar
      :view="myView"
      :data="myEvents"
      @event-hover-in="handleEventHoverIn($event)"
      @event-hover-out="handleEventHoverout()"
    />
    <MbscPopup
      display="anchored"
      :anchor="myAnchor"
      :isOpen="isPopupOpen"
      :touchUi="false"
      :showOverlay="false"
      :width="250"
    >
      <div @mouseenter="mouseEnter()" @mouseleave="mouseLeave()">
        <div class="mds-tooltip-event-title-cont">
          <span>{{ eventTitle }}</span>
        </div>
        <div class="mds-tooltip-start-cont mbsc-flex">
          <span class="mds-tooltip-label">Start:</span>
          <span>{{ eventStart }}</span>
        </div>
        <div class="mds-tooltip-end-cont mbsc-flex">
          <span class="mds-tooltip-label">End:</span>
          <span>{{ eventEnd }}</span>
        </div>
      </div>
    </MbscPopup>
  </MbscPage>
</template>

<style>
.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;
}
</style>
```

### SFC TS

```vue
<script setup lang="ts">
import {
  formatDate,
  MbscEventcalendar,
  MbscPage,
  MbscPopup,
  setOptions
} from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscEventcalendarView, MbscEventClickEvent } from '@mobiscroll/vue'

import { ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const myEvents = ref<MbscCalendarEvent[]>([
  {
    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 = ref<boolean>(false)
const myAnchor = ref<any>()
const eventTitle = ref<string>()
const eventStart = ref<string>()
const eventEnd = ref<string>()
const timer = ref<any>()

function handleEventHoverIn(args: MbscEventClickEvent) {
  const event = args.event

  eventTitle.value = event.title
  eventStart.value = formatDate('hh:mm A', new Date(event.start as Date))
  eventEnd.value = formatDate('hh:mm A', new Date(event.end as Date))

  clearTimeout(timer.value)
  timer.value = null

  myAnchor.value = args.domEvent.target
  isPopupOpen.value = true
}

function handleEventHoverout() {
  if (!timer.value) {
    timer.value = setTimeout(() => {
      isPopupOpen.value = false
    }, 200)
  }
}

function mouseEnter() {
  if (timer.value) {
    clearTimeout(timer.value)
    timer.value = null
  }
}

function mouseLeave() {
  timer.value = setTimeout(() => {
    isPopupOpen.value = false
  }, 200)
}

const myView = ref<MbscEventcalendarView>({
  calendar: {
    type: 'month'
  }
})
</script>

<template>
  <MbscPage>
    <MbscEventcalendar
      :view="myView"
      :data="myEvents"
      @event-hover-in="handleEventHoverIn($event)"
      @event-hover-out="handleEventHoverout()"
    />
    <MbscPopup
      display="anchored"
      :anchor="myAnchor"
      :isOpen="isPopupOpen"
      :touchUi="false"
      :showOverlay="false"
      :width="250"
    >
      <div @mouseenter="mouseEnter()" @mouseleave="mouseLeave()">
        <div class="mds-tooltip-event-title-cont">
          <span>{{ eventTitle }}</span>
        </div>
        <div class="mds-tooltip-start-cont mbsc-flex">
          <span class="mds-tooltip-label">Start:</span>
          <span>{{ eventStart }}</span>
        </div>
        <div class="mds-tooltip-end-cont mbsc-flex">
          <span class="mds-tooltip-label">End:</span>
          <span>{{ eventEnd }}</span>
        </div>
      </div>
    </MbscPopup>
  </MbscPage>
</template>

<style>
.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;
}
</style>
```

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

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 vue --trial`.

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

## Related demos

- Previous: [Event creation modal](https://demo.mobiscroll.com/vue/popup/add-event-modal.md) - Use the Vue 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/vue/popup/range-picker-popup-presets.md) - Use the Vue popup to create advanced range picker components with presets and more.