Vue Popup Using as a tooltip Example

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

Preview in full screen

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

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

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>

<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({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
})

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>