Hi Viji,
Greetings from Syncfusion support,
Based on your query, you want to set a custom tooltip for the header in the
React Grid component. We have achieved your requirement by using the EJ2
Tooltip.
To display a custom tooltip, you can render the Grid
control inside the Tooltip component and set the target as
"e-headertext". This will show the tooltip when hovering over the
grid column header.
Here's an example of how you can do it:
|
<TooltipComponent
ref={(t) => (tooltip = t)}
target=".e-headertext"
beforeRender={beforeRender}
>
{/* Your Grid component goes here */}
</TooltipComponent>
|
To change the tooltip content for the grid cell header,
use the following code in the `beforeRender` event:
|
const beforeRender = (args) => {
// Event triggered before rendering the tooltip
on the target element.
tooltip.content = args.target.innerText;
};
|
By using this method, you can achieve the custom column
header tooltip for your React Grid component.
I have attached the sample for your kind reference.
Sample: https://stackblitz.com/edit/react-hxayfg-jdnb8e?file=index.js
Kindly get back to us, if you any concern.
Regards,
Gayathri
