Tooltip background color

[David Alfonso Alvarez]

Hi,

how can I customize tooltip's background color of gantt chart?

this is the toolbar code of gantt:

Thanks.

[Monisha Sivanthilingam]

Hi David, 

 

Greetings from Syncfusion support. 

 

We can achieve your requirement by making use of the CSS classes of the tooltip on both the gantt and grid side. We can use the background-color property to change the color of the tooltip to any color you wish. The following code snippets demonstrate the solution. 

 

Index.html 

 

<style> 

  .e-gantt-tooltip.e-tooltip-wrap, 

  .e-tooltip-wrap .e-tip-content { 

    background-color: green; 

  } 

</style> 

 

 

We have also prepared a sample for your reference. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha. 

[David Alfonso Alvarez]

Hello syncfusion team

All tooltips change correctly but toolbar tooltip doesn't change its background-color. In this case the tooltip must change to red color, that change doesn't apply in background-color of toolbar tooltip.

Toolbar tooltip must be red

thanks for your help!

[Monisha Sivanthilingam]

Hi David, 

 

Your query is related to one of our dependent components and we have forwarded your query to them. We will provide you with an update within two business days(July 2, 2021). 

 

We appreciate your patience until then.  

 

Regards, 

Monisha. 

45

[Monisha Sivanthilingam]

Hi David, 

 

Thank you for your patience. 

 

The tooltip that appears when hovering over the toolbar items the default browser tooltip using the title attribute to display it. We cannot get or set its style. However, we can achieve your requirement by creating a custom tooltip for the toolbar and setting its background color as red as per your requirement. The following code snippets demonstrate the solution. 

 

App.component.html 

 

<ejs-tooltip id="tooltip" cssClass='custom-tip' target='#ganttDefault_Gantt_Toolbar [title]'> 

  <ejs-gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" 

             [allowSelection]="true" [labelSettings]="labelSettings" height="400px" 

             [projectStartDate]="projectStartDate" 

             [projectEndDate]="projectEndDate" [toolbar]="toolbar" [highlightWeekends]="true"> 

   </ejs-gantt> 

</ejs-tooltip> 

 

 

Index.html 

 

<style> 

 .e-gantt-tooltip.e-tooltip-wrap, 

  .e-tooltip-wrap .e-tip-content { 

      background-color: red; 

  } 

 

  .custom-tip.e-tooltip-wrap .e-arrow-tip.e-tip-top { 

      display: none; 

  } 

</style> 

 

 

We have also prepared a sample for your reference. 

 

Please contact us if you require any further assistance. 

                                                                                                                                            

Regards, 

Monisha.