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.

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

The tooltip will show anything returned by the JavaScript passed into dbk.tooltip so you can get very creative here. Below you'll find some tips for customizing the display. Please contact us if you'd like help making something special.

Adding More Fields

Add more fields to the tooltip by separating them with a "+" sign. You can also add HTML to make things more readable. Here's the event title followed by the resource on a new line:

dbk.tooltip(event.title + '<br />' + event.resource);

The "event dot" notation is how you'll specify any fields you've made available to DayBack: these are the "under the hood" names for your fields, not the names used in your Salesforce object or FileMaker table. You'll see a list of all these under the hood names here: event and editEvent Objects.

Reference custom fields in your tooltip using the field's "ID" like this:

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

Tooltips have access to the momentjs library and you'll use that to format dates and times. For example, the event start time is event.start, but you'll want to display it like this:

event.start.format('h:mm a')

This may seem tedious, but moment's date and time formatting is really wonderful. Try this one:

event.start.fromNow()

event.start.calendar()

If you want to show the start and end time together, here's a nice version that does so only when there are times and when the times differ:

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

Tooltips are styled with CSS. If you haven't played with DayBack's CSS before, you can learn more about it here, including how to call different CSS for different calendars and different views.

The most basic styling involves just customizing the CSS class already assigned to the tooltips by default. This class is tooltip-custom and you can do things like this to make the text of the tooltip a different font size:

.tooltip-custom {
	font-size: 16px;
}

To change the background color of the tooltip you need to address it AND the little triangle that comes with it:

.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;
}

Going further, you can add your own CSS classes within the tooltip to style individual fields or elements differently. Here we've set up the tooltip so we can style the field labels differently than the field contents:

dbk.tooltip('<span class="tooltiplable"> Status: <span>'+ event.status + '<br /><span class="tooltiplable"> Resource: <span>' + event.resource);

And the CSS would be something like:

.tooltip-custom .tooltiplable {
	color: #CCCCCC;
}

Using Different Tooltips on Each View

Tooltips are defined per-source, so you can easily have different tooltip content for each of your different FileMaker tables. But you may also want to show slightly different content on different views/tabs in DayBack.

To do so, you'll create If() statements in your Javascript for each view you're interested in. The example below shows a simpler tooltip on Month and Day views, where you can already see the whole event title, and then adds the title back on all other views:

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);
}

As shown above, you can get the current view name with:

seedcodeCalendar.get('view').name

The view names are listed below; "basic" views are the ones without the time scale on the left side.

agendaDay
basicDay
agendaWee
basicWeek
month
basicHorizon
basicResourceDays
agendaResourceVert
agendaResourceHor
basicResourceVert
basicResourceHor

You may also want to change the tooltip if the calendar's columns are below a certain width. You can do that by using this to find the width:

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!