Tooltips
You can add tooltips to DayBack by creating an "On Hover" event action for any calendar source. Event actions can call URLs or JavaScript.
In this article
Simple Tooltips
To create a simple tooltip you'll use a JavaScript function called dbk_tooltip like this:
dbk.tooltip(event.title);
Tooltips have a built-in 350ms delay so they don't drive you crazy: you can change that by including an optional delay parameter like this (set that to zero to remove the delay altogether):
dbk.tooltip(event.title, {delay: 500});
To add that, navigate to admin settings and click on the source/calendar you're interested in. Select the Actions and Buttons tab and click on "New Action" and enter a new On Event Hover action as shown below
When you're done, click "Back to Calendar" in the upper left and you'll see tooltips like this when you hover over items in that calendar:
Customizing Your Tooltips
Adding More Fields
dbk.tooltip(event.title + '<br />' + event.resource);
dbk.tooltip(event.title + '<br />' + event['1596290358745-7876969101'] );
Note that if your field is empty, it will show as "undefined" in your tooltip. Here's an example of testing for "undefined" in your JS before showing the field:
displayfields (event); function displayfields (event) { var stateApprovedDisplay; var stateApproved = event['1596290358745-7876969101']; if ( typeof stateApproved !== 'undefined') { stateApprovedDisplay = '<br>Status: ' + stateApproved; } else { stateApprovedDisplay =''; } dbk.tooltip( event.title + stateApprovedDisplay ); }
Formatting Dates and Times
event.start.format('h:mm a')
event.start.fromNow()
event.start.calendar()
displaytimes (event); function displaytimes (event) { var timeString; if ( !event.start.isSame(event.end) ) { timeString = event.start.format('h:mm a') + ' - ' + event.end.format('h:mm a'); } else { timeString = event.start.format('h:mm a'); } if ( !event.allDay ) { dbk.tooltip(timeString); } }
All the supported formatting options are here: https://momentjs.com/docs/#/displaying/
Timezone Tooltips
Translate your events into multiple timezones using a simple tooltip. Example code and step-by-step instructions are included here: timezone tooltips.
Styling Tooltips
.tooltip-custom { font-size: 16px; }
.tooltip-custom .tooltip-inner { background: red; } .tooltip-custom.top .tooltip-arrow { border-top-color: red; } .tooltip-custom.bottom .tooltip-arrow { border-bottom-color: red; } .tooltip-custom.left .tooltip-arrow { border-left-color: red; } .tooltip-custom.right .tooltip-arrow { border-right-color: red; }
dbk.tooltip('<span class="tooltiplable"> Status: <span>'+ event.status + '<br /><span class="tooltiplable"> Resource: <span>' + event.resource);
.tooltip-custom .tooltiplable { color: #CCCCCC; }
Using Different Tooltips on Each View
if (seedcodeCalendar.get('view').name == 'month' || seedcodeCalendar.get('view').name == 'basicDay' ) { dbk.tooltip('Status: '+ event.status + '<br />' + 'Resource: ' + event.resource); } else { dbk.tooltip('Status: '+ event.status + '<br />' + 'Resource: ' + event.resource + '<br />' + event.title); }
seedcodeCalendar.get('view').name
- agendaDay
- basicDay
- agendaWee
- basicWeek
- month
- basicHorizon
- basicResourceDays
- agendaResourceVert
- agendaResourceHor
- basicResourceVert
- basicResourceHor
seedcodeCalendar.get('view').getColWidth()
Including Queries in Your Tooltips
Tooltips can be a great place to surface information that would bog down the calendar if it were included in the query for every single event. For example, you may want to show information about an appointment's payment history, but don't want to query the appointment's account until you need to see that information.
Tooltips let you run that query only when you hover over the event. Because queries can take a moment to resolve, DayBack includes some controls to explicitly hide (or defer) the tooltip, and then to show it once you're ready. In the example below, we'll only show the tooltip after the 500 ms delay, plus the 10ms delay included in the tooltip function itself.
var content = event.title; var tooltip = dbk.tooltip ( content, {delay: 10, hide: true} ); setTimeout(function() { tooltip.show(content);} , 500);
Note that there is also tooltip.hide if you'd like the tooltip to go away after a certain period of time, even if the user doesn't move their mouse off the event. This version will hide the tooltip after 2 seconds:
var content = event.title; var tooltip = dbk.tooltip ( content, {delay: 10} ); setTimeout(function() { tooltip.hide();} , 2000);
Example
Now that you can control when the tooltip shows up, you can include rich queries inside your tooltip itself. Here's an example of including a SOQL query in your tooltip to grab a variety of fields from a custom object and format the results. tooltip-SOQL-Query.js.zip Huge thanks to Blake Ludban at Tejas Production for this cool example!