We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

create tooltip/indication/icon in gantt chart column

i want this type of tooltip/icon/indicator prefix with 2nd column i.e task name column gantt chart as below image. and  on hover on this tooltip i need to show some text as tooltip content
you can use this    https://stackblitz.com/edit/angular-m6mu6l?file=app.component.html,app.component.ts,data.ts





1 Reply

DA Divya Ayyachamy Syncfusion Team February 20, 2023 08:32 AM UTC

Hi Mukarram,


Thanks for contacting Syncfusion Support.


To modify any column, you can use the column template and render the tooltip component inside it to show the tooltip when hovering the icon. You can change the tooltip content using ‘content’ property in the tooltip component.


You can refer to our user guide on column template for more information: https://ej2.syncfusion.com/angular/documentation/gantt/columns/column-template


For more information on our tooltip component, you can refer to this link: https://ej2.syncfusion.com/angular/documentation/tooltip/getting-started#initialize-tooltip-within-a-container



We have prepared a sample using Angular to demonstrate how to achieve this. You can refer to it by visiting this link

https://stackblitz.com/edit/angular-syaast-a8dvy9?file=index.html,app.component.html,app.component.ts,main.ts,app%2Fapp.module.ts


Here is a code snippet to help you get started



Regards,

Divya


Loader.
Up arrow icon