Tool tip customisation

Question

Hi greetings ,My tooltip is currently looking like this as given below imageAnd i want to make it look like this My requirement is that the tooltip will show on the sides of the appointment and does not flow over any appointment as shown in above image, Right now the tooltip follow the mouse cursor due to which the tooltip float over the appointment.We have followed all the tooltip customisation method as given in the documentation but was not able to achieve the requirement.I am providing you the code structure of my project for the reference.HTML part COMPONENT PARTCSS partThe css part is in the same order  Please get back to us as soon as possible Thank you.

Ravikumar Venkatesan · Accepted Answer

Hi Shubham, 

Thanks for the update. 

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

Ravikumar Venkatesan · Answer

Hi Shubham, 

Greetings from Syncfusion support. 

We have validated your requirement at our end and achieved your requirement with the help of the tooltip position and mouseTrail property of the tooltip in the Schedule created and actionComplete events of the Schedule and for that, 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-hqnvxg?file=app.component.ts 

[app.component.ts] 




  private onCreated() { 
    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; 
  } 


API(position): https://ej2.syncfusion.com/angular/documentation/api/tooltip#position 
API(mouseTrail): https://ej2.syncfusion.com/angular/documentation/api/tooltip#mousetrail 
API(created event): https://ej2.syncfusion.com/angular/documentation/api/schedule/#created 
API(actionComplete event): https://ej2.syncfusion.com/angular/documentation/api/schedule/#actioncomplete 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 
Ravikumar Venkatesan

Shubham · Answer

Hi thanks again for the reply But i am still facing the same issue.

So as i was going through your provided code i came to a conclusion to my problem that when i use
the e-resources and e-resource tag in ejs-schedule tag the css of tooltip changes and then it gives me that same tooltip problem

My tooltip follows the mouse direction and due to which tooltip shows over the appointments

And my requirement was that tooltip will only show on the right side of the appointment not over the appointment when we hover on any appointment.

Please get back to us as soon as possible

Thank you