EventTooltip
Feature

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.

Useful configs

Config	Description
showOn	Gesture that activates the tooltip (click, hover)
renderer	Custom content renderer function
titleRenderer	Custom title renderer function
tooltip	Direct config for the tooltip widget

Configs

Configs are options you supply in a configuration object when creating an instance of this class

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 : Booleanfalse

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'.

Has a corresponding runtime alignToDomEvent property.
clickDelay : Number

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.

Has a corresponding runtime clickDelay property.
extendAllDayEndDay : Booleanfalse

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.
recurrenceConfirmation : RecurrenceConfirmationPopupConfig

private

This config is used to directly configure the associated recurrence confirmation popup used when a delete is requested.

renderer : Function/String

ASYNC

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

Parameters

context : Object

Renderer context data
eventRecord : EventModel

The event record which the tooltip is being shown for.
tip : Tooltip

The tooltip instance
element : HTMLElement

The Element for which the Tooltip is monitoring mouse movement
activeTarget : HTMLElement

The target element that triggered the show
event : Event

The raw DOM event

Returns

String/Promise/DomConfig

revealEventsInCluster : Booleantrue

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.

Has a corresponding runtime revealEventsInCluster property.
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
Parameters
- record : EventModel
  
  Event record
Returns

String/DomConfig
tooltip : EventTipConfig

This config is used to directly configure the associated tooltip.

Has a corresponding runtime tooltip property.

Properties

Properties are getters/setters or publicly accessible variables on this class

isEventTooltip : Booleantrue

READONLY

static

ADVANCED

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

alignToDomEvent : Booleanfalse

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'.

Has a corresponding alignToDomEvent config.
clickDelay : Number

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.

Has a corresponding clickDelay config.
eventRecord : EventModel

READONLY

The event which the tooltip feature has been activated for.
revealEventsInCluster : Booleantrue

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.

Has a corresponding revealEventsInCluster config.
tooltip : EventTip

READONLY

Gets the Tooltip instance that this feature is using.

Has a corresponding tooltip config.
isEventTooltip : Booleantrue

READONLY

ADVANCED

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

id: eventTooltip

Source path

Calendar/feature/EventTooltip.js

Demo

examples/tooltips

EventTooltip
Feature

Useful configs

See also

Configs

Parameters

Returns

Parameters

Returns

Properties

Source path

Demo

Inheritance tree4

Mixins2

Contents

EventTooltip Feature

Useful configs

See also

Configs

Parameters

Returns

Parameters

Returns

Properties

Source path

Demo

Inheritance tree4

Mixins2

Contents

EventTooltip
Feature