EventTooltip

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.

Event tooltip

//<code-header>
fiddle.title = 'Event tooltip';
//</code-header>
targetElement.innerHTML = '<p>Hover an event to see a custom tooltip:</p><h3>Local tooltip data</h3><div class="local"></div><h3>Remote tooltip data</h3><div class="remote"></div>';

const scheduler = new Scheduler({
    adopt      : targetElement.querySelector('.local'),
    // makes scheduler as high as it needs to be to fit rows
    autoHeight : true,

    features : {
        eventTooltip : {
            template : data => `
            <div class="b-sch-event-tooltip">
             ${data.startText} -> ${data.endText}
            </div>`
        }
    },

    startDate : new Date(2018, 4, 6),
    endDate   : new Date(2018, 4, 13),

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ],

    resources : [
        { id : 1, name : 'Bernard' },
        { id : 2, name : 'Bianca' }
    ],

    events : [
        { id : 1, resourceId : 1, name : 'Hover me', startDate : '2018-05-07', endDate : '2018-05-10' },
        { id : 2, resourceId : 2, name : 'Or me', startDate : '2018-05-10', endDate : '2018-05-12' }
    ]
});

const scheduler2 = new Scheduler({
    adopt : targetElement.querySelector('.remote'),

    // makes grid as high as it needs to be to fit rows
    autoHeight : true,

    features : {
        eventTooltip : ({ eventRecord }) => new Promise(resolve => {
            setTimeout(() => {
                resolve(eventRecord.name + '<br><br> Some remote content');
            }, 2000);
        })
    },

    startDate : new Date(2018, 4, 6),
    endDate   : new Date(2018, 4, 13),

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ],

    resources : [
        { id : 1, name : 'Bernard' },
        { id : 2, name : 'Bianca' }
    ],

    events : [
        { id : 1, resourceId : 1, name : 'Hover to load remote data', startDate : '2018-05-07', endDate : '2018-05-10' },
        { id : 2, resourceId : 2, name : 'Or hover me...', startDate : '2018-05-10', endDate : '2018-05-12' }
    ]
});

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.

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.

Configs

Common

disabledInstancePlugin

listenersEvents

Other

autoHide: Boolean= true

Set this value to false to keep Tooltip visible after mouse leaves the target element.

scrollAction: hide | realign | null= hide

Defines what to do if document is scrolled while the tooltip is visible.

Valid values: ´null´: do nothing, ´hide´: hide the tooltip or ´realign´: realign to the target if possible.

catchEventHandlerExceptionsEvents

hideDelayTooltipBase

hoverDelayTooltipBase

Rendering

template: function

A function which receives data about the event and returns a string, or a Promise yielding a string (for async tooltips), to be displayed in the tooltip. This method will be called with an object containing the fields below

Parameter	Type	Description
`data`	Object	Data context
`data.eventRecord`	EventModel	Hovered event bar's record
`data.assignmentRecord`	AssignmentModel	Hovered event bar's associated assignment
`data.resourceRecord`	ResourceModel	Hovered event bar's associated resource
`data.startDate`	Date	Hovered event bar's start date
`data.endDate`	Date	Hovered event bar's end date
`data.startText`	String	Start text
`data.endText`	String	End text
`data.tip`	Tooltip	Current tooltip instance
`data.startClockHtml`	String	Predefined HTML to show the start time
`data.endClockHtml`	String	Predefined HTML to show the end time