Skip to main content

Tooltips

Tooltips come from a field, a computed value, or a custom component — on body cells and headers — with grid-wide positioning and interaction options. Clipped cell text gets an automatic tooltip with no configuration at all.

Loading interactive example…
React
const columns: ReactColDef[] = [
  { key: "owner", label: "Owner", tooltipField: "ownerEmail" },
  {
    key: "revenue",
    label: "Revenue",
    tooltipValueGetter: ({ value, data }) => data.customer + ": $" + value,
  },
  { key: "margin", label: "Margin", headerTooltip: "Revenue minus direct cost" },
];

<Grid
  rowData={rows}
  columnDefs={columns}
  tooltip={{ showDelay: 150, mode: "anchored", placement: "auto" }}
/>

Field and computed body tooltips​

const columnDefs: ColDef[] = [
  { key: "owner", label: "Owner", tooltipField: "ownerEmail" },
  {
    key: "revenue",
    label: "Revenue",
    tooltipValueGetter: ({ value, data }) => `${data.account}: $${value}`,
  },
];

When no explicit content is configured, clipped cell text gets an automatic tooltip. Set suppressAutoTooltip: true on a column to opt it out.

Header tooltip​

const column = {
  key: "margin",
  label: "Margin",
  headerTooltip: "Revenue minus direct cost",
} satisfies ColDef;

Custom body tooltip​

const accountTooltip = ({ data }) => {
  const card = document.createElement("div");
  card.innerHTML = `<strong>${data.account}</strong><br>${data.owner}`;
  return card;
};

const column = {
  key: "account",
  label: "Account",
  tooltipComponent: accountTooltip,
} satisfies ColDef;

The React and Angular bindings accept framework components in the same tooltipComponent slot.

Position and interaction​

const options = {
  tooltip: {
    showDelay: 150,
    hideDelay: 75,
    mode: "anchored",
    placement: "auto",
    interactive: true,
    escapeRootClip: true,
  },
} satisfies GridOptions;

A column may override mode, placement, interactive, and escapeRootClip through tooltipOptions. Interactive content is always anchored; non-interactive content may use mode: "follow".

escapeRootClip and theming

escapeRootClip: true mounts the floating element in document.body so it is not clipped near the grid edge — but a body-mounted element is outside the grid root, where the theme's --pte-* custom properties are applied, so tooltip-related theme params do not reach it. Keep the tooltip inside the root, or set the variables at :root scope. ActionFrames behave the same way.

Tooltip API and events​

api.showTooltip({ rowId: "order-1", colId: "owner" });
api.hideTooltip();

const unsubscribe = api.on("tooltipShow", (event) => console.log(event));
unsubscribe();

Set tooltip: false to disable body, header, and automatic tooltips globally.