Resource Hover Tooltip
Usage
theme: 'ios' You can turn auto theming on and let it decide based on the platform.
Usage
themeVariant: 'light' You can turn auto dark mode on based on system settings.
Usage
clickToCreate: true,
// click to create is on dragToCreate: true,
// drag to create is on dragToMove: true,
// reordering is on dragToResize: true,
// resizing is on eventDelete: true
// deleting is on Fine-tune drag & drop with these options, which are false by default.
Usage
locale: mobiscroll.localeEn Selecting the locale loads the localized settings and the translated UI text.
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 onResourceHoverIn and onResourceHoverOut 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 →
Demo
Code
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
var tooltipElm = document.getElementById('demo-resource-info-popup');
var resourceAvatar = document.getElementById('demo-resource-info-avatar');
var resourceName = document.getElementById('demo-resource-info-name');
var resourceCost = document.getElementById('demo-resource-info-cost');
var resourceDate = document.getElementById('demo-resource-info-date');
var resourceTotal = document.getElementById('demo-resource-info-total');
var payButtonElm = document.getElementById('demo-resource-info-pay');
var hoveredResourceElm = null;
var currentResource = null;
var selectedDate = new Date();
var openTimer;
var closeTimer;
function getTotalHoursForResource(events, resourceId) {
return events
.filter(function (e) {
return e.resource === resourceId;
})
.reduce(function (sum, e) {
var start = new Date(e.start);
var end = new Date(e.end);
var hours = (end - start) / (1000 * 60 * 60);
return sum + hours;
}, 0);
}
function openTooltip(resource, target) {
clearTimeout(closeTimer);
clearTimeout(openTimer);
// Delay opening the tooltip to avoid flickering
openTimer = setTimeout(function () {
var events = calendar.getEvents();
var totalHours = getTotalHoursForResource(events, resource.id);
currentResource = resource;
hoveredResourceElm = target;
resourceAvatar.src = resource.avatar;
resourceName.textContent = resource.name;
resourceCost.textContent = '$' + resource.cost;
resourceDate.textContent = mobiscroll.formatDate('D DDD MMM YYYY', selectedDate);
resourceTotal.textContent = totalHours + 'h, $' + totalHours * resource.cost;
target.classList.add('mds-resource-info-hover');
tooltip.position();
tooltip.open();
openTimer = null;
}, 100);
}
// Close the tooltip with a delay to allow for hover interactions
function closeTooltip() {
clearTimeout(openTimer);
clearTimeout(closeTimer);
closeTimer = setTimeout(function () {
tooltip.close();
closeTimer = null;
}, 200);
}
var calendar = mobiscroll.eventcalendar('#demo-display-resource-information-on-hover', {
clickToCreate: ,
dragToCreate: ,
dragToMove: ,
dragToResize: ,
eventDelete:
view: {
timeline: {
type: 'day',
startTime: '07:00',
endTime: '22:00',
},
},
data: [
{
start: '2026-10-22T12:00',
end: '2026-10-22T15:00',
title: 'Repoint Brick Facade',
resource: 'res1',
},
{
start: '2026-10-22T09:00',
end: '2026-10-22T12:00',
title: 'Install Custom Wood Trim',
resource: 'res3',
},
{
start: '2026-10-22T14:00',
end: '2026-10-22T18:00',
title: 'Repair Steel Stair Treads',
resource: 'res4',
},
{
start: '2026-10-22T10:00',
end: '2026-10-22T13:00',
title: 'Pour and Finish Driveway Slab',
resource: 'res6',
},
{
start: '2026-10-22T11:00',
end: '2026-10-22T16:00',
title: 'Paint Interior Drywall',
resource: 'res8',
},
{
start: '2026-10-23T08:00',
end: '2026-10-23T11:00',
title: 'Block Wall Construction',
resource: 'res1',
},
{
start: '2026-10-23T14:00',
end: '2026-10-23T16:00',
title: 'Task 2',
resource: 'Paver Installation',
},
{
start: '2026-10-23T12:00',
end: '2026-10-23T17:00',
title: 'Install ceiling fan',
resource: 'res2',
},
{
start: '2026-10-23T10:00',
end: '2026-10-23T14:00',
title: 'Roof Beam Replacement',
resource: 'res3',
},
{
start: '2026-10-23T07:00',
end: '2026-10-23T12:00',
title: 'Custom Metalworks Creation',
resource: 'res4',
},
{
start: '2026-10-23T14:00',
end: '2026-10-23T17: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-23T13:00',
end: '2026-10-23T17:00',
title: 'Faucet & Sink Fitting',
resource: 'res5',
},
{
start: '2026-10-23T18:00',
end: '2026-10-23T20:00',
title: 'Drainage System Setup',
resource: 'res5',
},
{
start: '2026-10-23T09:00',
end: '2026-10-23T13:00',
title: 'Surface Polishing',
resource: 'res6',
},
{
start: '2026-10-23T08:00',
end: '2026-10-23T10:00',
title: 'Structural Steel Inspections',
resource: 'res7',
},
{
start: '2026-10-23T13:00',
end: '2026-10-23T16:00',
title: 'Metal Structure Assembly',
resource: 'res7',
},
{
start: '2026-10-23T17:00',
end: '2026-10-23T19:00',
title: 'Heavy Steel Beam Placement',
resource: 'res7',
},
{
start: '2026-10-23T09:00',
end: '2026-10-23T12:00',
title: 'Exterior House Painting',
resource: 'res8',
},
{
start: '2026-10-23T15:00',
end: '2026-10-23T18:00',
title: 'Deck Staining & Sealing',
resource: 'res8',
},
{
start: '2026-10-24T12:00',
end: '2026-10-24T15:00',
title: 'Troubleshoot Faulty Breaker',
resource: 'res2',
},
{
start: '2026-10-24T10:00',
end: '2026-10-24T13:00',
title: 'Frame Interior Partitions',
resource: 'res3',
},
{
start: '2026-10-24T16:00',
end: '2026-10-24T20:00',
title: 'Weld Structural Beam Connections',
resource: 'res4',
},
{
start: '2026-10-24T12:00',
end: '2026-10-24T16:00',
title: 'Apply Smooth Trowel Finish to Basement Floor',
resource: 'res6',
},
],
resources: [
{
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',
},
],
renderResource: function (res) {
return (
'<div class="mbsc-flex">' +
'<img class="mds-resource-info-avatar" src="' +
res.avatar +
'"/>' +
'<div class="mds-resource-info-details">' +
'<div class="mds-resource-info-title">' +
res.name +
'</div>' +
'<div class="mds-resource-info-profession">' +
res.profession +
'</div>' +
'</div>' +
'</div>'
);
},
onResourceHoverIn: function (args) {
openTooltip(args.resource, args.target);
},
onResourceHoverOut: function (args) {
args.target.classList.remove('mds-resource-info-hover');
closeTooltip();
},
onPageChange: function (args) {
selectedDate = args.firstDay;
},
});
var tooltip = mobiscroll.popup('#demo-resource-info-popup', {
display: 'anchored',
showOverlay: false,
touchUi: false,
width: 280,
onPosition: function (args, inst) {
var popupElm = args.target.querySelector('.mbsc-popup');
var rect = hoveredResourceElm.getBoundingClientRect();
popupElm.style.top = rect.top - 10 + 'px';
if (inst.s.rtl) {
popupElm.style.right = window.innerWidth - rect.left + 10 + 'px';
} else {
popupElm.style.left = rect.right + 10 + 'px';
}
return false; // Prevent default positioning
},
});
tooltipElm.addEventListener('mouseenter', function () {
clearTimeout(closeTimer);
});
tooltipElm.addEventListener('mouseleave', function () {
closeTooltip();
});
payButtonElm.addEventListener('click', function () {
tooltip.close();
mobiscroll.toast({
message: currentResource.name + ' paid',
});
});
<div id="demo-resource-info-popup" style="display: none;">
<div class="mbsc-flex mbsc-align-items-center mds-resource-info-header">
<img id="demo-resource-info-avatar" class="mds-resource-info-avatar" />
<div id="demo-resource-info-name" class="mds-resource-info-name mbsc-flex-1-0"></div>
<button id="demo-resource-info-pay" mbsc-button data-color="success" data-variant="outline" class="mds-resource-info-pay mbsc-button-xs">
Pay
</button>
</div>
<div class="mds-resource-info-cont">
<div>
<span class="mbsc-txt-muted">Hourly rate </span>
<span id="demo-resource-info-cost" class="mds-resource-info-detail"></span>
</div>
<div>
<span id="demo-resource-info-date" class="mbsc-txt-muted"></span>
<span id="demo-resource-info-total" class="mds-resource-info-detail"></span>
</div>
</div>
</div>
<div id="demo-display-resource-information-on-hover"></div>
.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: .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;
}