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

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, {event: event});

Tooltips have a built-in 350ms delay to prevent them from appearing immediately as you move your mouse across the calendar, reducing on-screen noise. You can adjust this delay or remove it entirely by setting it to 0. The following example sets a tooltip delay of half a second:

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

Steps to Add a Tooltip:

  1. Navigate to Admin Settings: Go to the Admin Settings of your DayBack calendar.
  2. Select the Source or Calendar: Click on the specific source or calendar where you want to display tooltips.
  3. Go to Actions and Buttons: Select the Actions and Buttons tab.
  4. Create a New Action: Click on "New Action" and enter a new "On Event Hover" action as shown below.
  5. Save and Return: When you're done, click "< Back to Calendar" in the upper left.

Customizing Your Tooltips

The tooltip will display anything returned by the JavaScript passed into the dbk.tooltip function, allowing for creative customization. Below are tips for customizing the display. Feel free to contact us if you need help creating something special.

Adding More Fields:

To add more fields to the tooltip, separate them with a + sign. You can also include HTML for better readability. For example, the event title followed by the resource on a new line:

dbk.tooltip(event.title + '<br />' + event.resource, {event: event});

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

Referencing Custom Fields:

You can reference custom fields in your tooltip using the field's "ID" like this:  
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 + '
' + event[customFieldId], {event: event});

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 JavaScript code before showing the field. In this example, the tooltip will not display if the field 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,
	    {event: event}
	);
    }
}

Formatting Dates and Times:

Tooltips have access to the  moment js library. This library can be used to format dates and times. For example, the event start time is stored as a moment object within the variable event.start , but you'll want to display it by using the format() function: 
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're new to working with DayBack's CSS, you can learn more about it here, including how to apply different CSS for various calendars and views.

Basic Styling:

The most basic styling involves customizing the CSS class already assigned to tooltips by default. This class is tooltip-custom . For example, to change the font size of the tooltip text, you can use the following CSS:

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

To change the tooltip's background color and the color of the accompanying triangle, you need to address both elements:

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

Advanced Styling:

You can add your own CSS classes within the tooltip to style individual fields or elements differently. For instance, to format the label and value of a field differently within the tooltip:

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 the value in bold white:

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

Using Different Tooltips on Each View:

Tooltips are defined per source, so you can easily have different tooltip content for each of your sources and calendars. However, you might also want to display different content on various views/tabs in DayBack.

To achieve this, you can use if statements in your JavaScript to customize the tooltip for each view. The example below shows a simpler tooltip on Month and Day views (where the whole event title is already visible) and 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

View Names:

Here are the view names you can use in your tooltips. "Basic" views are those without the time scale on the left side:

  • agendaDay
  • basicDay
  • agendaWeek
  • basicWeek
  • month
  • basicHorizon
  • basicResourceDays
  • agendaResourceVert
  • agendaResourceHor
  • basicResourceVert
  • basicResourceHor

Show Tooltip Only for Small Screens:

A popular option is to only show a tooltip if the calendar's columns are below a certain width. You can do that by using this method to find the width: 
// 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

Overview:

Tooltips can display additional information without overloading the calendar by including heavy queries for every event. For example, you might want to show an appointment's payment history, but only query the account when needed.

Tooltips allow you to run such queries only when you hover over the event. Since queries can take time to resolve, DayBack includes controls to defer the tooltip's display until the query completes. Below, we'll show how to defer the tooltip for a brief period before displaying it.

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

Running SOQL Queries:

For an example of how to run SOQL queries within a custom action, please refer to this custom action example.

Important Note:

SOQL queries count toward your daily API query limit in Salesforce. As these actions are triggered each time you hover over an event, the queries can quickly accumulate. We suggest creating custom fields in the field mapping so that all data is pulled in a single query. You can then reference those fields directly from the event object, as shown here.

Hiding Tooltips Yourself:

Each tooltip object includes a tooltip.hide() method, allowing you to remove a tooltip 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);

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: '',
   
   // Optional target element for the tooltip. If no element is 
   // specified, the current Event Pill will be used as the target of
   // the tooltip. You can, however add tooltips to any on-screen
   // element by specifying a custom target. 
   
   targetElement: domElement,
   
   // Optional post-render function will run as soon as the tooltip is
   // shown. This is useful if you need to run custom code after a tooltip
   // is showing, such as adding additional on-screen elements, triggering
   // the start of an animation, or running a third-party API call.
   
   postRenderFunction: function () { .. },
   
   // Optional post-destroy function will run as soon as the tooltip is
   // hidden. This is a useful if you need to run custom code after a
   // tooltip hides, such as changing a global variable, or triggering
   // a third-party API call.
   
   postDestroyFunction: function() { ..}
};

// 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 supports a show and hide method

tooltip.show(); // Show tooltip

tooltip.hide(); // Hide tooltip

// You can also optionally keep a tooltip from hiding when the mouse leaves the 
// tooltip. This is helpful if the user needs to interact with the tooltip for 
// a long period of time, they need to go to another screen, or interact with
// another part of DayBack. The tooltip will continue to show until you
// switch off the Keep Alive setting, or run the hide() function.

tooltip.setKeepAlive(true); // Prevent tooltip from hiding when move leaves tooltip

tooltip.setKeepAlive(false); // Hide tooltip when mouse leaves the tooltip<br>

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

Related Articles