Tool tip CSS Changes when e-resources and e-resource tag is used inside ejs-schedule tag

[Shubham]

Hi,

So as i was implementing the ejs-schedule i came to face a problem related to tooltip so as i mentioned when i use e-resources and e-resource tag in ejs-schedule tag the CSS of tooltip changes and then it gives me the problem

Problem : I want to show tooltip on the right side of the appointment but right now as soon as i use thee-resources and e-resource tag in ejs-schedule tag the tooltip start to follow the mouse due to which the tooltip start to show over the appointment.

AND My requirement is to show the tooltip only on the right side of the appointment like this

And right now it looks like this (below image):-

This solution provided by you did not worked for me(below link) please look into this

https://stackblitz.com/edit/ej2-angular-schedule-tooltip-position-customization-samp-hqnvxg?file=app.component.ts

Above linked solution only works when this condition is not applied

Condition:e-resources and e-resource tag in ejs-schedule tag

Also i am not able to change the tooltip border from black to any other colour

Below i am providing the Code for the reference

HTML PART

CSS PART

The CSS And HTML part is in the same order

Please get back to us as soon as possible

Thank you.

[Ravikumar Venkatesan]

Hi Shubham, 

  

Greetings from Syncfusion support. 

  

We have validated your requirement at our end and achieved it with the help of the dataBound and actionComplete event of the Schedule and for the same, we have prepared a sample which can be available from the below link. 

  

Sample: https://stackblitz.com/edit/ej2-angular-schedule-tooltip-position-customization-samp-ghj44k?file=app.component.ts 

  

[app.component.ts] 

export class AppComponent { 

  @ViewChild("scheduleObj", { static: false }) public scheduleObj: ScheduleComponent; 

  public isInitialRendering: Boolean = true; 

  

  private onDataBound() { 

    if (this.isInitialRendering) { 

      this.isInitialRendering = false; 

      this.setTooltip(); 

    } 

  } 

  private onActionComplete(args) { 

    if (["dateNavigate", "viewNavigate"].indexOf(args.requestType) > -1) 

      this.setTooltip(); 

  } 

  

  private setTooltip() { 

    // Setting up the position to the tooltip 

    ((this.scheduleObj.element as EJ2Instance) 

      .ej2_instances[2] as Tooltip).position = "RightCenter"; 

    // Disable the mouse trail 

    ((this.scheduleObj.element as EJ2Instance) 

      .ej2_instances[2] as Tooltip).mouseTrail = false; 

  } 

} 

  

[app.component.css] 

/* Changing the border color of the tooltip */ 

  

.e-tooltip-wrap.e-popup { 

  background-color: #616161; 

  border: 10px solid #9c27b0 !important; 

} 

  

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

  

Regards, 

Ravikumar Venkatesan