EventTooltip

Feature

Displays a tooltip when hovering events. The template used to render the tooltip can be customized, see template. Config options are also applied to the tooltip shown, see Tooltip for available options.

This feature is enabled by default.

Showing local data

To show a basic "local" tooltip (with data available in the Event record) upon hover:

new Scheduler({
  features : {
    eventTooltip : {
        // Tooltip configs can be used here
        align : 'l-r' // Align left to right,
        // A custom HTML template
        template : ({ eventRecord }) => `<dl>
             <dt>Assigned to:</dt>
             <dd>
                 ${eventRecord.resource.name}
             </dd>
             <dt>Time:</dt>
             <dd>
                 ${DateHelper.format(eventRecord.startDate, 'LT')} - ${DateHelper.format(eventRecord.endDate, 'LT')}
             </dd>
             ${eventRecord.note ? `<dt>Note:</dt><dd>${eventRecord.note}</dd>` : ''}

             ${eventRecord.image ? `<dt>Image:</dt><dd><img class="image" src="${eventRecord.image}"/></dd>` : ''}
         </dl>`
    }
  }
});

Showing remotely loaded data

Loading remote data into the event tooltip is easy. Simply use the template and return a Promise which yields the content to show.

new Scheduler({
  features : {
    eventTooltip : {
       template : ({ eventRecord }) => AjaxHelper.get(`./fakeServer?name=${eventRecord.name}`).then(response => response.text())
    }
  }
});

By default, the tooltip realigns on scroll meaning that it will stay aligned with its target should a scroll interaction make the target move.

If this is causing performance issues in a Scheduler, such as if there are many dozens of events visible, you can configure this feature with scrollAction: 'hide'. This feature's configuration is applied to the tooltip, so that will mean that the tooltip will hide if its target is moved by a scroll interaction.

Keeping tooltip visible after mouse exits target element

By default, a Tooltip is transient, and will hide when the mouse leaves the target element. Configure this feature with autoHide set to false to make the Tooltip stay visible.

Useful configs and functions

See also

• TooltipBase - Base tooltip class
• ScheduleTooltip - Tooltip for empty schedule areas
• EventEdit - Editing events