How to add tooltip to grid column names in a functional component?

[ismail]

Hi, 

How to add tooltips to grid column name? I tried to adapt this example but args is always undefined

https://ej2.syncfusion.com/react/documentation/treegrid/how-to/custom-tool-tip-for-columns/

Here my code 

I would appreciate an example using react functional component.

[Rajapandi Ravi]

Hi Ismail,

Greetings from Syncfusion support

We have checked your shared information and we could see that you like to display the Tooltip in the Grid column. To display a custom ToolTip (EJ2 Tooltip), you can render the Grid control inside the Tooltip component and set the target as “.e-rowcell”. The tooltip is displayed when hovering over the grid cells. We have already discussed your requirement in our documentation which can be accessed from the below link,

Documentation: https://ej2.syncfusion.com/react/documentation/grid/columns/columns/#display-custom-tooltip-for-columns

Regards,

Rajapandi R

[ismail]

I have trouble converting the example to a functional component. I don't know how to pass the args parameter to beforeRender.

[Rajapandi Ravi]

Hi Ismail,

Tanks for your update

Since you are using functional component in your application, based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.

 

function Home() {

  const beforeRender = args => {

    const tooltip = document.getElementById('Tooltip').ej2_instances[0];

    // event triggered before render the tooltip on target element.

    tooltip.content = args.target.closest("td").innerText;

}

  return (

    <div>

      {' '}

      <p>Grid-1 using Functional Components</p>

      <TooltipComponent id="Tooltip" target='.e-rowcell' beforeRender={beforeRender}>

      <GridComponent id="Grid" dataSource={dataSources} allowPaging={true} editSettings={editSettings}>

      <ColumnsDirective>

                <ColumnDirective field='Name.0.id' headerText='ID' width='140' textAlign='Right' isPrimaryKey={true}></ColumnDirective>

                <ColumnDirective field='Name.0.name' headerText='Name'  width='150' ></ColumnDirective>

                <ColumnDirective field='Name.0.username' headerText='User Name' width='140'></ColumnDirective>

                <ColumnDirective field='Name.0.email' headerText='Mail' width='140'></ColumnDirective>

              </ColumnsDirective>

              <Inject services={[Edit]} />

      </GridComponent>

      </TooltipComponent>

    </div>

  );

}

 

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

Regards,

Rajapandi R