EventTooltip

A feature which displays a tooltip containing extra information. The tooltip can be triggered by clicking or hovering an event bar element (see showOn).

Configuration options from this feature are used to configure the EventTip instance:

new Calendar({
   features : {
       eventTooltip : {
           tools : {
               // Do not show the Delete tool in the tooltip header
               delete : false,
               // Add a new tool for our own operation
               newTool : {
                   cls     : 'b-icon-add',
                   tooltip : 'Test',
                   handler() {
                       console.log(`Test ${this.eventRecord.name}`);
                   }
               }
           },
           renderer({ eventRecord }) {
               return {
                   text : `From ${DateHelper.format(eventRecord.startDate, 'l')} to ${DateHelper.format(eventRecord.endDate, 'l')}`
               },
           },
           titleRenderer( eventRecord ) {
               return {
                   text      : `${eventRecord.name} ${eventRecord.resource.name}`,
                   className : {
                       'b-urgent'    : eventRecord.isUrgent,
                       'b-completed' : eventRecord.isCompleted
                   }
               };
           }
       }
   }
})

You can hide tools conditionally:

new Calendar({
    features : {
        eventTooltip : {
            listeners : {
                beforeShow({ source }) {
                    source.tools.delete = false;
                }
            }
        }
    }
})

This feature is enabled by default.

Event tooltip

//<code-header>
fiddle.title = 'Event tooltip';
//</code-header>
const calendar = new Calendar({
    appendTo : targetElement,
    height   : 700,

    // We have a little less width in our context, so reduce the responsive breakpoints
    responsive : {
        small : {
            when : 480
        },
        medium : {
            when : 640
        }
    },

    // Start life looking at this date
    date : '2020-03-01',

    // Used to create view titles
    dateFormat : 'DD MMM YYYY',

    // CrudManager arranges loading and syncing of data in JSON form from/to a web service
    crudManager : {
        transport : {
            load : {
                url : 'data/Calendar/examples/feature/company-events.json'
            }
        },
        autoLoad : true
    },

    // Features named by the properties are included.
    // An object is used to configure the feature.
    features : {
        eventTooltip : {
            // Configuration options are passed on to the tooltip instance.
            // Override the default which is to show on click.
            showOn : 'hover',

            // Create content for Tooltip header
            titleRenderer : eventRecord => eventRecord.name,

            renderer({ eventRecord }) {
                return {
                    children : [{
                        text : `${eventRecord.description}`
                    }, {
                        style : {
                            display             : 'grid',
                            gridTemplateColumns : '4em 1fr'
                        },
                        children : ['From', {
                            text : DateHelper.format(eventRecord.startDate, 'DD MMMM YYYY{ at }HH:mm')
                        }]
                    }, {
                        style : {
                            display             : 'grid',
                            gridTemplateColumns : '4em 1fr'
                        },
                        children : ['To', {
                            text : DateHelper.format(eventRecord.endDate, 'DD MMMM YYYY{ at }HH:mm')
                        }]
                    }]
                };
            },

            tools : {
                // Add a new tool for our own operation
                newTool : {
                    cls     : 'b-icon-add',
                    tooltip : 'Test',
                    // 'up.' means look in owning widgets.
                    // Implemented on the Calendar
                    handler : 'up.onTooltipAddClick'
                }
            }
        }
    },

    // Tooltip's Tool handler resolved here
    onTooltipAddClick(e, tooltip) {
        MessageDialog.alert({
            title   : 'Tooltip tool clicked',
            message : `Test ${tooltip.eventRecord.name}`
        });
    },

    // Modes are the views available in the Calendar.
    // An object is used to configure the view.
    modes : {
        agenda : null,
        year   : null,
        week   : {
            dayStartTime : 8
        },
        day : {
            dayStartTime : 8
        }
    }
});

Configs

Common

disabledInstancePlugin

listenersEvents

Other

align: AlignSpec | String= 'b-t'

Defines how to align the EventTooltip to its event.

The value can be either a simple string or a full configuration object.

When using a simple string, the format is '[trblc]n-[trblc]n' and it specifies tooltip edge and the event edge plus optional offsets from 0 to 100 along the edges to align to. Also supports direction independent edges horizontally, s for start and e for end (maps to l and r for LTR, r and l for RTL).

For more details about using the object form, see showBy.

Once set, this is stored internally in object form.

alignToDomEvent: Boolean= falseAlso a property

By default, the tooltip aligns to the event bar according to the align setting.

If set to true, the tooltip will show at the DOM event point which triggered the tooltip.

This is automatically set to true when using showOn : 'contextmenu'.

clickDelay: NumberAlso a property

If using showOn : 'click' (the default), this is the amount of time to delay showing after the click gesture. This may be used if you do not wish the tooltip to appear on the first click of a double click gesture. By default there is no delay, and the tip is shown instantly.

extendAllDayEndDay: Boolean= false

By default, the end date of an all day event is displayed in the tooltip UI as the last calendar date on which the event falls. For most end users, this is the expected value.

Technically, the endDate is a timestamp which represents the exact point in time at which an event ends. To use this instead, configure extendAllDayEndDay as true.

To be clear, this would mean that an allDay event starting and ending on the 7th of February 2020, would show the end date in the tooltip as 8th of February 2020.

renderer: function | String

A function, or the name of a function called to update the tooltip's content when the cursor is moved over a target.

It receives one argument containing context about the tooltip and show operation. The function may return either an HTML string, or a DomConfig object, or a Promise yielding one of these.

new Calendar({
    features : {
        eventTooltip : {
            renderer : 'up.getEventTip'
        }
    },
    getEventTip({ eventRecord }) {
        return {
            className : 'tooltip-content',
            text      : eventRecord.name
        }
    }
});

new Calendar({
    features : {
        eventTooltip : {
            renderer : 'up.getEventTip'
        }
    },
    getEventTip({ eventRecord }) {
        return '<div class="tooltip-content> + eventRecord.name + '</div>';
    }
});

new Calendar({
    features : {
        eventTooltip : {
            renderer : 'up.getEventTip'
        }
    },
    getEventTip : async function({ eventRecord }) {
        // Use a web service which returns a JSON DomConfig block
        const response = await fetch(`getEventTipContent?event=${eventRecord.id}`);
        return response.json();
    }
});

Parameter	Type	Description
`context`	Object
`context.eventRecord`	EventModel	The event record which the tooltip is being shown for.
`context.tip`	Tooltip	The tooltip instance
`context.element`	HTMLElement	The Element for which the Tooltip is monitoring mouse movement
`context.activeTarget`	HTMLElement	The target element that triggered the show
`context.event`	Event	The raw DOM event

Returns: String | Promise | DomConfig

revealEventsInCluster: Boolean= trueAlso a property

By default, if the tip's target event is in a cluster of overlapping events and therefore narrow, activating the tip will expand it to full width temporarily.

Configure this as false to disable this.

showOn: click | contextmenu | mouseover | hover= click

The gesture which activates the event tooltip. Defaults to 'click', but may be set to 'contextmenu' or 'mouseover'. The tip persists until closed.

If set to 'hover', the tip shows on mouseover and hides on mouseout.

If set to 'contextmenu', the EventMenu is not shown while this is enabled and the tip shows at the mouse/touch contact point, otherwise it aligns to the target event bar.

titleRenderer: function | String

A function, or the name of a function which, when passed the active EventModel, returns a value to use as the tooltip's title.

The function may return either an HTML string, or a DomConfig object. Defaults to using the event name

Parameter	Type	Description
`record`	EventModel	Event record

Returns: String | DomConfig

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

Class hierarchy

isEventTooltip: Boolean= truereadonly

Identifies an object as an instance of EventTooltip class, or subclass thereof.

isEventTooltip: Boolean= truereadonlystatic

Identifies an object as an instance of EventTooltip class, or subclass thereof.

isCalendarFeatureCalendarFeature

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

Other

alignToDomEvent: Boolean= falseAlso a config

By default, the tooltip aligns to the event bar according to the align setting.

If set to true, the tooltip will show at the DOM event point which triggered the tooltip.

This is automatically set to true when using showOn : 'contextmenu'.

clickDelay: NumberAlso a config

eventRecord: EventModelreadonly

The event which the tooltip feature has been activated for.

revealEventsInCluster: Boolean= trueAlso a config

By default, if the tip's target event is in a cluster of overlapping events and therefore narrow, activating the tip will expand it to full width temporarily.

Configure this as false to disable this.

catchEventHandlerExceptionsEvents