Resource Hover Tooltip

Displaying information in a tooltip can come in handy when space is tight but information matters. When hovering over a resource cell, the resource-hover-in and resource-hover-out lifecycle events are triggered, which can be used to show/hide rich tooltips. Information and actions shown here won't clutter the main view, keep the timeline clean while still giving quick access to content that helps.

Do you want to learn more about customizing the resource header?  Take a look at this example →
Get started with this example

Demo

Loading the live demo

Preview in full screen

Hover over a resource row in the Timeline to open a tooltip popup with scheduled hours — keeps the timeline view clean.

Code

View code on GitHub 
<script setup>
import {
  formatDate,
  MbscButton,
  MbscEventcalendar,
  MbscPopup,
  MbscToast,
  setOptions 
} from '@mobiscroll/vue'
import { ref } from 'vue'

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

const myResources = [
  {
    id: 'res1',
    name: 'Adam Miller',
    color: '#F39C12',
    profession: 'Mason',
    avatar: 'https://img.mobiscroll.com/demos/m1.png',
    cost: '15'
  },
  {
    id: 'res2',
    name: 'Emily Carter',
    color: '#76e083',
    profession: 'Electrician',
    avatar: 'https://img.mobiscroll.com/demos/f1.png',
    cost: '20'
  },
  {
    id: 'res3',
    name: 'James Brown',
    color: '#b13f49',
    profession: 'Carpenter',
    avatar: 'https://img.mobiscroll.com/demos/m2.png',
    cost: '18'
  },
  {
    id: 'res4',
    name: 'Daniel Wilson',
    color: '#e25dd2',
    profession: 'Welder',
    avatar: 'https://img.mobiscroll.com/demos/m3.png',
    cost: '22'
  },
  {
    id: 'res5',
    name: 'Benjamin Harris',
    color: '#7056ff',
    profession: 'Plumber',
    avatar: 'https://img.mobiscroll.com/demos/m4.png',
    cost: '20'
  },
  {
    id: 'res6',
    name: 'Olivia Anderson',
    color: '#56aaff',
    profession: 'Concrete Finisher',
    avatar: 'https://img.mobiscroll.com/demos/f2.png',
    cost: '15'
  },
  {
    id: 'res7',
    name: 'Emma Thompson',
    color: '#84852f',
    profession: 'Steelworker',
    avatar: 'https://img.mobiscroll.com/demos/f3.png',
    cost: '18'
  },
  {
    id: 'res8',
    name: 'Natalie Roberts',
    color: '#ff6e56',
    profession: 'Painter',
    avatar: 'https://img.mobiscroll.com/demos/f4.png',
    cost: '25'
  }
]

const myEvents = [
  {
    start: '2026-10-24T12:00',
    end: '2026-10-24T15:00',
    title: 'Repoint Brick Facade',
    resource: 'res1'
  },
  {
    start: '2026-10-24T09:00',
    end: '2026-10-24T12:00',
    title: 'Install Custom Wood Trim',
    resource: 'res3'
  },
  {
    start: '2026-10-24T14:00',
    end: '2026-10-24T18:00',
    title: 'Repair Steel Stair Treads',
    resource: 'res4'
  },
  {
    start: '2026-10-24T10:00',
    end: '2026-10-24T13:00',
    title: 'Pour and Finish Driveway Slab',
    resource: 'res6'
  },
  {
    start: '2026-10-24T11:00',
    end: '2026-10-24T16:00',
    title: 'Paint Interior Drywall',
    resource: 'res8'
  },
  {
    start: '2026-10-25T08:00',
    end: '2026-10-25T11:00',
    title: 'Block Wall Construction',
    resource: 'res1'
  },
  {
    start: '2026-10-25T14:00',
    end: '2026-10-25T16:00',
    title: 'Task 2',
    resource: 'Paver Installation'
  },
  {
    start: '2026-10-25T12:00',
    end: '2026-10-25T17:00',
    title: 'Install ceiling fan',
    resource: 'res2'
  },
  {
    start: '2026-10-25T10:00',
    end: '2026-10-25T14:00',
    title: 'Roof Beam Replacement',
    resource: 'res3'
  },
  {
    start: '2026-10-25T07:00',
    end: '2026-10-25T12:00',
    title: 'Custom Metalworks Creation',
    resource: 'res4'
  },
  {
    start: '2026-10-25T14:00',
    end: '2026-10-25T17:00',
    title: 'Pipe Welding',
    resource: 'res4'
  },
  {
    start: '2026-10-10T08:00',
    end: '2026-10-11T20:00',
    title: 'Leak Detection & Repair',
    resource: 'res5'
  },
  {
    start: '2026-10-25T13:00',
    end: '2026-10-25T17:00',
    title: 'Faucet & Sink Fitting',
    resource: 'res5'
  },
  {
    start: '2026-10-25T18:00',
    end: '2026-10-25T20:00',
    title: 'Drainage System Setup',
    resource: 'res5'
  },
  {
    start: '2026-10-25T09:00',
    end: '2026-10-25T13:00',
    title: 'Surface Polishing',
    resource: 'res6'
  },
  {
    start: '2026-10-25T08:00',
    end: '2026-10-25T10:00',
    title: 'Structural Steel Inspections',
    resource: 'res7'
  },
  {
    start: '2026-10-25T13:00',
    end: '2026-10-25T16:00',
    title: 'Metal Structure Assembly',
    resource: 'res7'
  },
  {
    start: '2026-10-25T17:00',
    end: '2026-10-25T19:00',
    title: 'Heavy Steel Beam Placement',
    resource: 'res7'
  },
  {
    start: '2026-10-25T09:00',
    end: '2026-10-25T12:00',
    title: 'Exterior House Painting',
    resource: 'res8'
  },
  {
    start: '2026-10-25T15:00',
    end: '2026-10-25T18:00',
    title: 'Deck Staining & Sealing',
    resource: 'res8'
  },
  {
    start: '2026-10-26T12:00',
    end: '2026-10-26T15:00',
    title: 'Troubleshoot Faulty Breaker',
    resource: 'res2'
  },
  {
    start: '2026-10-26T10:00',
    end: '2026-10-26T13:00',
    title: 'Frame Interior Partitions',
    resource: 'res3'
  },
  {
    start: '2026-10-26T16:00',
    end: '2026-10-26T20:00',
    title: 'Weld Structural Beam Connections',
    resource: 'res4'
  },
  {
    start: '2026-10-26T12:00',
    end: '2026-10-26T16:00',
    title: 'Apply Smooth Trowel Finish to Basement Floor',
    resource: 'res6'
  }
]

const resourceAvatar = ref('')
const resourceName = ref('')
const resourceCost = ref('')
const resourceDate = ref('')
const resourceTotal = ref('')
const currentResource = ref(null)
const tooltipAnchor = ref(null)
const isTooltipOpen = ref(false)
const isToastOpen = ref(false)
const toastMessage = ref('')

const tooltipRef = ref(null)
const calRef = ref(null)
const hoveredResourceElmRef = ref(null)
const mySelectedDate = ref(new Date())
const openTimer = ref(null)
const closeTimer = ref(null)

const myView = {
  timeline: {
    type: 'day',
    startTime: '07:00',
    endTime: '22:00'
  }
}

function getTotalHoursForResource(resourceId) {
  return calRef.value.instance
    .getEvents()
    .filter((e) => e.resource === resourceId)
    .reduce((sum, e) => {
      const start = new Date(e.start)
      const end = new Date(e.end)
      const hours = (end - start) / (1000 * 60 * 60)
      return sum + hours
    }, 0)
}

// Handles both Mobiscroll hover and native mouse events
function openTooltip(resource, target) {
  clearTimeout(closeTimer.value)
  clearTimeout(openTimer.value)

  openTimer.value = setTimeout(() => {
    const totalHours = getTotalHoursForResource(resource.id)

    currentResource.value = resource
    hoveredResourceElmRef.value = target

    resourceAvatar.value = resource.avatar
    resourceName.value = resource.name
    resourceCost.value = '$' + resource.cost
    resourceDate.value = formatDate('D DDD MMM YYYY', mySelectedDate.value)
    resourceTotal.value = totalHours + 'h, $' + totalHours * resource.cost
    target.classList.add('mds-resource-info-hover')

    tooltipAnchor.value = target
    isTooltipOpen.value = true

    openTimer.value = null
  }, 100)
}

function closeTooltip() {
  clearTimeout(openTimer.value)
  clearTimeout(closeTimer.value)

  closeTimer.value = setTimeout(() => {
    isTooltipOpen.value = false
    closeTimer.value = null
  }, 200)
}

// Mobiscroll resource hover events
function handleResourceHoverIn(args) {
  openTooltip(args.resource, args.target)
}

function handleResourceHoverOut(args) {
  args.target.classList.remove('mds-resource-info-hover')
  closeTooltip()
}

function handlePageChange(args) {
  mySelectedDate.value = args.firstDay
}

// Native mouse events for the popup
function handlePopupMouseEnter() {
  clearTimeout(closeTimer.value)
}

function handlePopupMouseLeave() {
  closeTooltip()
}

function handlePay() {
  isTooltipOpen.value = false
  toastMessage.value = currentResource.value.name + ' paid'
  isToastOpen.value = true
}
</script>

<template>
  <MbscEventcalendar :clickToCreate="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete=""
    ref="calRef"
    :view="myView"
    :data="myEvents"
    :resources="myResources"
    @resource-hover-in="handleResourceHoverIn"
    @resource-hover-out="handleResourceHoverOut"
    @page-change="handlePageChange"
  >
    <template #resource="resource">
      <div class="mbsc-flex">
        <img class="mds-resource-info-avatar" :src="resource.avatar" alt="Avatar" />
        <div class="mds-resource-info-details">
          <div class="mds-resource-info-title">{{ resource.name }}</div>
          <div class="mds-resource-info-profession">{{ resource.profession }}</div>
        </div>
      </div>
    </template>
  </MbscEventcalendar>
  <MbscPopup
    ref="tooltipRef"
    display="anchored"
    :anchor="tooltipAnchor"
    :showOverlay="false"
    :touchUi="false"
    :width="280"
    :isOpen="isTooltipOpen"
    @close="isTooltipOpen = false"
  >
    <div @mouseenter="handlePopupMouseEnter" @mouseleave="handlePopupMouseLeave">
      <div class="mbsc-flex mbsc-align-items-center mds-resource-info-header">
        <img class="mds-resource-info-avatar" :src="resourceAvatar" alt="Avatar" />
        <div class="mds-resource-info-name mbsc-flex-1-0">{{ resourceName }}</div>
        <MbscButton
          color="success"
          variant="outline"
          cssClass="mds-resource-info-pay mbsc-button-xs"
          @click="handlePay"
        >
          Pay
        </MbscButton>
      </div>
      <div class="mds-resource-info-cont">
        <div>
          <span class="mbsc-txt-muted">Hourly rate </span>
          <span class="mds-resource-info-detail">{{ resourceCost }}</span>
        </div>
        <div>
          <span class="mbsc-txt-muted">{{ resourceDate }}</span>
          <span class="mds-resource-info-detail">{{ resourceTotal }}</span>
        </div>
      </div>
    </div>
  </MbscPopup>
  <MbscToast :message="toastMessage" @close="isToastOpen = false" />
</template>

<style>
.mds-resource-info-avatar {
  width: 40px;
  height: 40px;
}
.mds-resource-info-details {
  margin: 0 8px;
}
.mds-resource-info-title {
  line-height: 24px;
}
.mds-resource-info-profession {
  font-size: 12px;
  opacity: 0.5;
  line-height: 18px;
}
.mds-resource-info-hover.mbsc-timeline-resource {
  text-decoration: underline;
}
.mds-resource-info-header {
  height: 35px;
}
.mds-resource-info-name {
  font-size: 18px;
  padding: 16px 10px;
}
.mds-resource-info-pay.mbsc-button {
  margin: 0;
  line-height: 24px;
  padding: 0 10px;
  will-change: opacity;
}
.mds-resource-info-pay .mbsc-button-txt {
  font-size: 12px;
}
.mds-resource-info-cont {
  font-size: 14px;
  line-height: 22px;
  padding-top: 23px;
}
.mbsc-ltr .mds-resource-info-detail {
  float: right;
}
.mbsc-rtl .mds-resource-info-detail {
  float: left;
}
</style>

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.