Column Tooltip

The headerTooltipRenderer property can be specified on a column definition to display a tooltip when the column header is hovered. The headerTooltipPlacement property specifies the tooltip placement. A tooltip is only displayed if a renderer is provided. Graphite Grid manages the tooltip display but does not provide the component rendered by the tooltip.

In the example below, a header tooltip renderer is set on each column definition and will display a description of each column.

const descriptions: Record<string, string> = {
  "company-name": "The name of the company",
  founded: "Year of incorporation",
  "employee-count": "Number of employees",
};
 
function HeaderTooltipRenderer<T>(params: HeaderParams<T>) {
  return (
    <div className="p-2 border border-indigo-400 bg-white text-black">
      {descriptions[params.column.id]}
    </div>
  );
}
 
export function ColumnTooltip() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        {
          id: "company-name",
          headerLabel: "Company Name",
          field: 0,
          headerTooltipRenderer: HeaderTooltipRenderer,
          headerTooltipPlacement: "bottom-start",
        },
        {
          id: "founded",
          headerLabel: "Founded",
          field: 1,
          headerTooltipRenderer: HeaderTooltipRenderer,
        },
        {
          id: "employee-count",
          field: 2,
          headerTooltipRenderer: HeaderTooltipRenderer,
        },
      ],
      // other grid properties
    },
  });
 
  return (
    <div style={{ height: 200 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}CopyCopied!

Grid Wide Tooltip Settings

Tooltip settings are grid-wide in Graphite Grid. Three settings apply to header tooltips:

• headerTooltipShowDelayMs: The time in milliseconds before the tooltip should be shown.
• headerTooltipHideDelayMs: The time in milliseconds before the tooltip fades after being shown.
• headerTooltipMouseOnly: If true, the tooltip should only be displayed by hovering with the mouse. This setting will disable tooltip displays on touch devices.

const grid = useGraphiteGrid({
  initial: {
    headerTooltipHideDelayMs: 200,
    headerTooltipShowDelayMs: 300,
    headerTooltipMouseOnly: false,
    // other grid properties
  },
});CopyCopied!