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.

Overview

Tooltips reduce the number of clicks necessary to show key information about upcoming events. Here's an example tooltip that shows the event's title, as well as the customer name, phone number, and email address:

This article describes how to create simple tooltips that showcase information in your event or perform simple transformations on that information--such as translating your event's time into different timezones.

For more elaborate examples, including tooltips that contain tables, charts, maps, and buttons, check our article on Advanced Calendar Tooltips. It includes movies and example code to take you further.

Simple Tooltips

To create a simple tooltip you'll use a JavaScript function called dbk.tooltip() like this inside of an On Event Hover event action:

dbk.tooltip(event.title);

Tooltips have a built-in 350ms delay so that they only appear after you hover over an event for a specific amount of time.  This helps prevent on screen noise as you move your mouse across the calendar. You can change the default delay to a longer wait time, or remove it completely by setting it to 0. This example will delay the tooltip by half a second when you hover over an event:

dbk.tooltip(event.title, {delay: 500});

To add a tooltip, navigate to admin settings and click on the source/calendar that you want to show tooltips for. 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 the tooltip when you hover over items in that calendar. 

Customizing Your Tooltips

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

dbk.tooltip(event.title + '<br />' + event['1596290358745-7876969101'] );

// If you prefer to refer to your custom fields by the human-readable 
// Store In Field Name, you can use our helper function to retrieve
// the numerical ID by name:

var customFieldId = dbk.getCustomFieldIdByName('nextStep', event.schedule);
dbk.tooltip(event.title + '<br />' + event[customFieldId] );

Display a Tooltip only if a certain field is defined

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. In this example, the tooltip will not display if the filed is undefined or is left blank:

// Call a custom function to display the value of the "Next Step" custom field

displayfields (event);

function displayfields (event) {

    // Get the Numerical ID for the custom field, by looking up the ID
    // using the human readable Store in Field Name:

    var customFieldId = dbk.getCustomFieldIdByName('nextStep', event.schedule);
    var nextStep = event[customFieldId];

    // If a Next Step is defined and not empty, display a tooltip with the
    // event title and the value of the next step. Make the next step appear
    // on a new line, displaying the title of the custom field in bold font:
	
    if (nextStep !== undefined && nextStep !== '') {
	    
	dbk.tooltip(
            event.title + '<br><b>Next Step:</b> ' + nextStep
	);
    }
}
	

Formatting Dates and Times

Tooltips have access to the moment js 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()
	

or

event.start.calendar()
	

Here's an example of what all three date formatting options would look like, with some additional HTML tags to make the font bold:

If you want to show the start and end time together, here's a nice way to display time:

// Run custom function to display a tooltip for the event
displaytimes(event);

function displaytimes (event) {

	// 1. Do now show tooltip for All Day events.
	// 2. Show time as "3:00pm to 4:00pm" if both both Start and End
	//    times are defined, and they are different for each other
	// 3. Otherwise, show only start time as "3:00pm"

	var timeString;

	if (!event.allDay && !event.start.isSame(event.end) ) {
		timeString = event.start.format('h:mm a') + ' - ' + 
			     event.end.format('h:mm a');
	} else if (!event.allDay)  {
		timeString = event.start.format('h:mm a');
	}

	dbk.tooltip(timeString);
}
	

If you'd like to format date and time in a different way, please see the moment js library documentation page for all available formatting options.

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: darkblue;
}
.tooltip-custom.top .tooltip-arrow {
	border-top-color: darkblue;
}
.tooltip-custom.bottom .tooltip-arrow {
	border-bottom-color: darkblue;
}
.tooltip-custom.left .tooltip-arrow {
	border-left-color: darkblue;
}
.tooltip-custom.right .tooltip-arrow {
	border-right-color: darkblue;
}
	

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 that formats the label, and the value of the field differently:

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

The following CSS would style the label in gray, and style the value in a bold white font:

.tooltip-custom .tooltiplable {
	color: #CCCCCC;
}
.tooltip-custom .tooltiplable span {
	color: #FFFFFF;
	font-weight: 700;
}
	

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
• agendaWeek
• basicWeek
• month
• basicHorizon
• basicResourceDays
• agendaResourceVert
• agendaResourceHor
• basicResourceVert
• basicResourceHor

Show Tooltip only for small screens:

// Only show tooltip for screens where column size is less than 100 pixels wide
// and we are on a Agenda Weekly or Basic Week 

var colWidth = seedcodeCalendar.get('view').getColWidth();
var viewName = seedcodeCalendar.get('view').name;

if ((viewName == 'agendaWeek' || viewName == 'basicWeek') && colWidth < 100) {
	dbk.tooltip('Status: '+ event.status + '<br />' + 'Resource: ' + event.resource);
}

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.

// Define a variable that will return the result of your query or function call

var content;

// Display the tooltip with a 10ms delay, and display it in a hidden state

var tooltip = dbk.tooltip ( content, {delay: 10, hide: true} );

// At this point the tooltip is hidden and has no content.
// Display the tooltip after 500ms delay, regardless of whether
// our query returns successful or not in that 400ms

setTimeout(function() { tooltip.show(content); }, 500);

// Run your FileMaker or Salesforce query to set the content
// In this example we are just setting content to the description
// that is already loaded. You will need to replace this with your
// Salesforce SOQL query, or FileMaker query

content = event.description;

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

Salesforce SOQL Query 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! 

Tooltip Configuration Options:

The dbk.tooltip() function has the following available options. All are optional, and if not supplied, DayBack will use the defaults that are specified below:

// Define a variable that will contan the content of your tooltip

var content = 'Your tooltip content';

// JavaScript object containing options

var options = { 

	// Delays display of tooltip by 350 milliseconds

	delay: 350,	

	// Show the tooltip. Set to true to hide tooltip by default

	hide: false,	

	// Will display the tooltip at the top or bottom of the event
	// available options include: 'auto', 'top', 'right', 'bottom', 'left'

	position: 'auto',

	// Optional className to define for the tooltip. This is useful if 
	// you want to style different tooltips in unique ways in your CSS
	// By default DayBack sets a default class name: 
	//
	//     .tooltip-custom { ... }
	
 	className: ''
}; 

// Load the tooltip, with the above paramters, and return a tooltip Object

var tooltip = dbk.tooltip(content, options);

// Tooltip will show by default, but the tooltip support two methods:

tooltip.show(); // Show tooltip

tooltip.hide(); // Hide tooltip

Defining Multiple CSS Styles for Different Tooltips:

If you have Tooltips that need to contain different content, and which need to be styled differently depending on the event type or some custom field value, you can add a className parameter and define a custom CSS style for that class. 

dbk.tooltip(event.title, { className: 'customClassName' });

You can then apply CSS style definitions for the salesTooltip class as follows:

.tooltip-custom.customClassName { ... }

Example:

In the following example, we are pulling the sales status of a lead from our CRM database. We've mapped the Sales status of our Account into the variable 'salesStatus'. We want to show a different tooltip for our Sales team for new leads, and a different tooltip of the deal has been won. He's how we could structure our code:

// Get Sales status. If you don't have this mapped, you can retrieve it
// using a Salesforce SOQL query, FileMaker query, or a custom API into 
// your CRM package

var salesStatus = dbk.getCustomFieldIdByName('salesStatus', event.schedule);

if (event[customerSalesStatus] == 'New Lead') {
	dbk.tooltip(getSalesInformationCard(), { className: 'salesCard' });
} else {
	dbk.tooltip(getProjectInformationCard(), { className: 'projectInfoCard' });
}

// Define our two functions that return different tooltip cards
// based on the type of card we want to load

function getSalesInformationCard() { ... }
function getProjectInformationCard() { ... }

Next, we can define our CSS styles by wrapping them in the following CSS elements:

.tooltip-custom.salesCard { 
	... 
}

.tooltip-custom.projectInfoCard { 
	... 
}