Show tool tip with delay in Angular Schedule component

26 Sep 20233 minutes to read

In default, the Schedule tooltip is showed without any delay. We can set up the delay to the Schedule tooltip with the help of the Tooltip openDelay property.

The preview demonstrates setting up the delay to the Schedule tooltip. You can check the Schedule tooltip with delay here.

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { EventSettingsModel, ScheduleComponent, DayService, WeekService, WorkWeekService, MonthService, AgendaService } from '@syncfusion/ej2-angular-schedule';
import { scheduleData } from './datasource';

@Component({
  selector: 'app-root',
  providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService],
  // specifies the template string for the Schedule component
  template: `<ejs-schedule #scheduleObj width='100%' height='550px' [selectedDate]="selectedDate" [eventSettings]="eventSettings" (created)="onCreated($event)">
</ejs-schedule>`
})

export class AppComponent {
  @ViewChild('scheduleObj') public scheduleObj?: ScheduleComponent;
  public selectedDate: Date = new Date(2018, 1, 15);
  public eventSettings: EventSettingsModel = { dataSource: scheduleData, enableTooltip: true };

  public onCreated(eventData: any): void {
    // Assigning the tooltip object to the tooltipObj variable.
    let tooltipObj =(this.scheduleObj?.element as any).ej2_instances[2];
    // Disable the tooltip to follow the mouse pointer position
    tooltipObj.mouseTrail = false;
    // Setting tooltip open delay
    tooltipObj.openDelay = 1000;
    // Setting the position to the tooltip
    tooltipObj.position = "TopCenter";
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService} from '@syncfusion/ej2-angular-schedule';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ScheduleModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [DayService, 
                WeekService, 
                WorkWeekService, 
                MonthService,
                AgendaService,
                MonthAgendaService]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);