REACTSchedule Tooltip template : impossible to properly set the background color of the tooltip

Question

Hello,I have taken the demo for the tooltip templating located here:https://ej2.syncfusion.com/react/demos/#/bootstrap4/schedule/tooltip and the Stackblitz associated code here: https://stackblitz.com/edit/react-4uuhta?file=index.js (this is where the demo page actually takes us)If you try to add a background color to the tooltip template : style={{ background: "#0000FF" }}You can see that there is a black border around the desired background color:It would be nice if this could be fixed. Not sure why the tooltip color doesn't actually follow the color the event it is associated with. The calendar is color coded but all tooltips are black.Thanks!Nicolas

Hareesh Balasubramanian · Accepted Answer

Hi Nicolas, 

Greetings from Syncfusion Support..! 

We have modified your shared sample based on your shared query “need to add customize the background color of the tooltip element” by removing the border for the tooltip element using CSS, which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/react-scheduler-customized-tooltip-template?file=index.js  





.e-tooltip-wrap.e-schedule-event-tooltip { 
  border: none; 
  background-color: transparent; 
} 

Kindly refer to the below screenshot of the above sample, 
  

By default the tooltip for all the appointments will be in black, if you want set background you can go with tooltip template. Kindly try the above solution and get back to us if you need any further assistance. 

We will happy to assist you..! 

Regards, 
Hareesh

Nicolas Beaumer · Answer

Hello Hareesh,Thank you for pointing to the right css element.It does the job indeed.I can also add some margin and padding to cope with the disappearing of the element (since now it is transparent..)Thank you for you quick reply.Best regards,Nicolas

Nevitha Ravi · Answer

Hi Nicolas, 

You are most welcome..! please get back to us if you need any further assistance. 

Regards, 
Nevitha