How to setup the Tooltip delay of an Appointment

[Bob Fiering]

Hi,

I want to create a delay when the mouse goes over the appointment in the TimelineView and the tooltip shows up.

On this Forum I saw a topic about this and the code that should do this.

When I try this there is no delay.

The code I try is as follows:

In the HTML as property of the ejs-grid I have added

(created)="onCreated()"

In the TS file I have a routine:

// Set base values for Tooltip at moment of creation
onCreated() {
  let tooltipObj = (this.scheduleObj.element as any).ej2_instances[1];
  // Disable the tooltip to follow the mouse pointer position
  tooltipObj.mouseTrail = false;
  // Open delay for 1 second
  tooltipObj.openDelay = 1000;
}

As said before there is no delay. I also tried bigger values but the Tooltip popups immediately.

The Angular version I use is 9.1.12 and the version of the Schedule package is 18.3.35

I hope you can help me with this issue.

Kind regards,

Bob Fiering

[Ravikumar Venkatesan]

Hi Bob, 

Greetings from Syncfusion support. 

We have checked your code in which tooltipObj is keyboard instance which is the cause for the reported problem “tooltip is not delayed”. We have prepared a sample by getting the tooltip instance properly which delays the opening of tooltip.  

 

[app.component.ts] 

  onCreated() { 

    // 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"; 

  } 

Sample: https://stackblitz.com/edit/ej2-angular-schedule-setting-up-tooltip-delay-sample-unqxqn?file=app.component.ts 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan 

[Bob Fiering]

Hi Ravikumar,

Thank you for the example. I see that it is working in your case.

However, when I try this my tooltipObj is still undefined after execution of the line underneath.

let tooltipObj = (this.scheduleObj.element as any).ej2_instances[2];

All my settings are the same, but somehow assigning the tooltip object does not work on my side.

Is there another way for assigning the tooltipObj in the timeline schedule?

I added my settings in the zip file.

Kind regards,

Bob

Attachment: problem_tooltip_delay_cb4a08ed.zip

[Ravikumar Venkatesan]

Hi Bob, 

Thanks for the update. 

We have validated your reported query “Is there another way for assigning the tooltipObj in the timeline schedule?” at our end. We have prepared a sample based on your shared code and checked your reported scenario. You have used resources in the schedule. Because of that, it takes some time to append the tooltip object to the schedule element. So, we suggest you to use a flag variable to add the delay to the tooltip object in the dataBound event of the schedule like the below code. We have prepared a sample for your reference and it can be available below. 

[app.component.ts] 

export class AppComponent { 

  @ViewChild("scheduleObj")public scheduleObj: ScheduleComponent; 

 

  // Flag variable to set up the delay to the schedule tooltip 

  public isTootipDelayApplied: boolean = false; 

 

  // Set base values for Tooltip at moment of creation 

  onDataBound() { 

    if (!this.isTootipDelayApplied) { 

      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"; 

      this.isTootipDelayApplied = true; 

    } 

  } 

} 

Sample: https://stackblitz.com/edit/ej2-angular-schedule-setting-up-tooltip-delay-sample-h8zjsw?file=app.component.ts 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan 

[Bob Fiering]

Hello Ravikumar,

The databound option is working perfect.

Thank you very much for your help.

Have a nice weekend.

Regards,

Bob

[Nevitha Ravi]

Hi Bob, 

  

You are most welcome. We are glad that our solution helps you, please get back to us if you need any further assistance. 

  

Regards, 

Nevitha