diff --git a/projects/angular-calendar/src/modules/common/calendar-tooltip.directive.ts b/projects/angular-calendar/src/modules/common/calendar-tooltip.directive.ts index 1973f5dda..6cfd11b5d 100644 --- a/projects/angular-calendar/src/modules/common/calendar-tooltip.directive.ts +++ b/projects/angular-calendar/src/modules/common/calendar-tooltip.directive.ts @@ -74,8 +74,12 @@ export class CalendarTooltipDirective implements OnDestroy { @Input('tooltipAppendToBody') appendToBody: boolean; // tslint:disable-line no-input-rename + @Input('tooltipDelay') + delay: number | null = null; // tslint:disable-line no-input-rename + private tooltipFactory: ComponentFactory; private tooltipRef: ComponentRef; + private showTooltipTimeoutId: number | null = null; constructor( private elementRef: ElementRef, @@ -96,11 +100,22 @@ export class CalendarTooltipDirective implements OnDestroy { @HostListener('mouseenter') onMouseOver(): void { - this.show(); + if (this.delay === null) { + this.show(); + } else { + this.showTooltipTimeoutId = window.setTimeout( + () => this.show(), + this.delay + ); + } } @HostListener('mouseleave') onMouseOut(): void { + if (this.showTooltipTimeoutId !== null) { + this.showTooltipTimeoutId = null; + clearTimeout(this.showTooltipTimeoutId); + } this.hide(); } diff --git a/projects/angular-calendar/src/modules/day/calendar-day-view-event.component.ts b/projects/angular-calendar/src/modules/day/calendar-day-view-event.component.ts index 116c2792e..4e4c7918e 100644 --- a/projects/angular-calendar/src/modules/day/calendar-day-view-event.component.ts +++ b/projects/angular-calendar/src/modules/day/calendar-day-view-event.component.ts @@ -17,7 +17,8 @@ import { PlacementArray } from 'positioning'; let-tooltipPlacement="tooltipPlacement" let-eventClicked="eventClicked" let-tooltipTemplate="tooltipTemplate" - let-tooltipAppendToBody="tooltipAppendToBody"> + let-tooltipAppendToBody="tooltipAppendToBody" + let-tooltipDelay="tooltipDelay">
` @@ -74,6 +77,9 @@ export class CalendarDayViewEventComponent { @Input() tooltipTemplate: TemplateRef; + @Input() + tooltipDelay: number | null; + @Output() eventClicked: EventEmitter = new EventEmitter(); } diff --git a/projects/angular-calendar/src/modules/day/calendar-day-view.component.ts b/projects/angular-calendar/src/modules/day/calendar-day-view.component.ts index fe5786e8d..a39b71eee 100644 --- a/projects/angular-calendar/src/modules/day/calendar-day-view.component.ts +++ b/projects/angular-calendar/src/modules/day/calendar-day-view.component.ts @@ -89,6 +89,7 @@ export interface DayViewEventResize { [tooltipPlacement]="tooltipPlacement" [tooltipTemplate]="tooltipTemplate" [tooltipAppendToBody]="tooltipAppendToBody" + [tooltipDelay]="tooltipDelay" [customTemplate]="eventTemplate" [eventTitleTemplate]="eventTitleTemplate" [eventActionsTemplate]="eventActionsTemplate" @@ -144,6 +145,7 @@ export interface DayViewEventResize { [tooltipPlacement]="tooltipPlacement" [tooltipTemplate]="tooltipTemplate" [tooltipAppendToBody]="tooltipAppendToBody" + [tooltipDelay]="tooltipDelay" [customTemplate]="eventTemplate" [eventTitleTemplate]="eventTitleTemplate" [eventActionsTemplate]="eventActionsTemplate" @@ -268,6 +270,13 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy { @Input() tooltipAppendToBody: boolean = true; + /** + * The delay in milliseconds before the tooltip should be displayed. If not provided the tooltip + * will be displayed immediately. + */ + @Input() + tooltipDelay: number | null = null; + /** * A custom template to use to replace the hour segment */ diff --git a/projects/angular-calendar/src/modules/month/calendar-month-cell.component.ts b/projects/angular-calendar/src/modules/month/calendar-month-cell.component.ts index 369f898ca..3f2450c31 100644 --- a/projects/angular-calendar/src/modules/month/calendar-month-cell.component.ts +++ b/projects/angular-calendar/src/modules/month/calendar-month-cell.component.ts @@ -22,7 +22,8 @@ import { PlacementArray } from 'positioning'; let-unhighlightDay="unhighlightDay" let-eventClicked="eventClicked" let-tooltipTemplate="tooltipTemplate" - let-tooltipAppendToBody="tooltipAppendToBody"> + let-tooltipAppendToBody="tooltipAppendToBody" + let-tooltipDelay="tooltipDelay">
{{ day.badgeTotal }} {{ day.date | calendarDate:'monthViewDayNumber':locale }} @@ -40,6 +41,7 @@ import { PlacementArray } from 'positioning'; [tooltipEvent]="event" [tooltipTemplate]="tooltipTemplate" [tooltipAppendToBody]="tooltipAppendToBody" + [tooltipDelay]="tooltipDelay" mwlDraggable [class.cal-draggable]="event.draggable" dragActiveClass="cal-drag-active" @@ -60,7 +62,8 @@ import { PlacementArray } from 'positioning'; unhighlightDay: unhighlightDay, eventClicked: eventClicked, tooltipTemplate: tooltipTemplate, - tooltipAppendToBody: tooltipAppendToBody + tooltipAppendToBody: tooltipAppendToBody, + tooltipDelay: tooltipDelay }"> `, @@ -100,6 +103,9 @@ export class CalendarMonthCellComponent { @Input() tooltipTemplate: TemplateRef; + @Input() + tooltipDelay: number | null; + @Output() highlightDay: EventEmitter = new EventEmitter(); diff --git a/projects/angular-calendar/src/modules/month/calendar-month-view.component.ts b/projects/angular-calendar/src/modules/month/calendar-month-view.component.ts index e5847a870..f5c1dd18e 100644 --- a/projects/angular-calendar/src/modules/month/calendar-month-view.component.ts +++ b/projects/angular-calendar/src/modules/month/calendar-month-view.component.ts @@ -72,6 +72,7 @@ export interface CalendarMonthViewEventTimesChangedEvent< [tooltipPlacement]="tooltipPlacement" [tooltipAppendToBody]="tooltipAppendToBody" [tooltipTemplate]="tooltipTemplate" + [tooltipDelay]="tooltipDelay" [customTemplate]="cellTemplate" (mwlClick)="dayClicked.emit({ day: day })" (highlightDay)="toggleDayHighlight($event.event, true)" @@ -155,6 +156,13 @@ export class CalendarMonthViewComponent @Input() tooltipAppendToBody: boolean = true; + /** + * The delay in milliseconds before the tooltip should be displayed. If not provided the tooltip + * will be displayed immediately. + */ + @Input() + tooltipDelay: number | null = null; + /** * The start number of the week */ diff --git a/projects/angular-calendar/src/modules/week/calendar-week-view-event.component.ts b/projects/angular-calendar/src/modules/week/calendar-week-view-event.component.ts index b5ee3a349..61b70ce09 100644 --- a/projects/angular-calendar/src/modules/week/calendar-week-view-event.component.ts +++ b/projects/angular-calendar/src/modules/week/calendar-week-view-event.component.ts @@ -18,7 +18,8 @@ import { PlacementArray } from 'positioning'; let-eventClicked="eventClicked" let-tooltipTemplate="tooltipTemplate" let-tooltipAppendToBody="tooltipAppendToBody" - let-tooltipDisabled="tooltipDisabled"> + let-tooltipDisabled="tooltipDisabled" + let-tooltipDelay="tooltipDelay">
` @@ -67,6 +70,9 @@ export class CalendarWeekViewEventComponent { @Input() tooltipDisabled: boolean; + @Input() + tooltipDelay: number | null; + @Input() customTemplate: TemplateRef; diff --git a/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts b/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts index 9186383c5..e8a026667 100644 --- a/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts +++ b/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts @@ -148,6 +148,7 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView { [tooltipPlacement]="tooltipPlacement" [tooltipTemplate]="tooltipTemplate" [tooltipAppendToBody]="tooltipAppendToBody" + [tooltipDelay]="tooltipDelay" [customTemplate]="eventTemplate" [eventTitleTemplate]="eventTitleTemplate" [eventActionsTemplate]="eventActionsTemplate" @@ -238,6 +239,7 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView { [tooltipTemplate]="tooltipTemplate" [tooltipAppendToBody]="tooltipAppendToBody" [tooltipDisabled]="dragActive || timeEventResizes.size > 0" + [tooltipDelay]="tooltipDelay" [customTemplate]="eventTemplate" [eventTitleTemplate]="eventTitleTemplate" [eventActionsTemplate]="eventActionsTemplate" @@ -328,6 +330,13 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy { @Input() tooltipAppendToBody: boolean = true; + /** + * The delay in milliseconds before the tooltip should be displayed. If not provided the tooltip + * will be displayed immediately. + */ + @Input() + tooltipDelay: number | null = null; + /** * The start number of the week */