Kanban component - How to enable column tooltip

[Mitesh Jadav]

Hi,

How can we enable tooltip for columns in Kanban component?

Thanks,

Mitesh

[Praveenkumar Narasimhanaidu]

Hi Mitesh, 

Greetings from Syncfusion support..! 

We have validated your requirement and let you know that we can achieve your requirement by setting enableTooltip property to true in Kanban component. For more information please refer below links. 

Demo: https://ej2.syncfusion.com/demos/#/material/kanban/tooltip-template.html 

UG: https://ej2.syncfusion.com/documentation/kanban/tooltip/ 

API: https://ej2.syncfusion.com/documentation/api/kanban/#enabletooltip 

Regards, 

Praveenkumar. 

[Mitesh Jadav]

Hi Praveenkumar,

I think, All links you provided are working for card tootip but was not able to figure-out how we can use a template for column header label tooltip. For example, in the provided demo link, there are columns like To Do, In Progress etc. How can we enable show tooltip using template when mouse over on those labels?

Thanks,

Mitesh

[Praveenkumar Narasimhanaidu]

Hi Mitesh, 

  

Thanks for the update. 

  

We can achieve your requirement through e-tooltip-text class which is used to show tooltip for Kanban board custom elements and we have prepared sample for your reference which is available in below link. 

  

Sample: https://stackblitz.com/edit/kanban-tooltip-text?file=index.html 

  

Index.ts 

  dataBound: args => { 

    var i; 

    let columns: any = kanbanObj.columns; 

    for (i = 0; i < columns.length; i++) { 

      let headers: any = document.querySelectorAll(".e-header-cells")[i]; 

      headers.classList.add("e-tooltip-text"); 

    } 

  }, 

  

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

  

Regards, 

Praveenkumar. 

[Dexter Louie Aniez]

Is it possible to show the tooltip while dragging a card? not on hover?

[Vinothkumar Yuvaraj]

Hi Dexter,

We would like to inform you that the requirement to show the tooltip while dragging the card into the restricted column is not possible. However, if you set allowDrop to false for the column, the cursor restriction symbol will appear, and you will not be able to drop the card in that column. Please refer to the following sample and code for more information:

<KanbanComponent id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id", tagsField: 'Tags', grabberField: 'Color', footerCssField: 'ClassName' }}>

          <ColumnsDirective>

                 <ColumnDirective headerText="To Do" keyField="Open" allowDrop={false}/>

           </ColumnsDirective>

</KanbanComponent>

Sample : https://stackblitz.com/edit/react-fzwrca?file=index.js

Screenshot:

API Link : https://helpej2.syncfusion.com/react/documentation/api/kanban/columnsModel/#allowdrop

Please let us know if you have any concerns.

Regards,

Vinothkumar