Tooltip Plugin

The Tooltip plugin shows popover tooltips when header or cell text overflows its container. It uses the Popover API with CSS anchor positioning for a native, consistent experience across browsers — with a JavaScript fallback for older browsers.

Tooltips appear automatically on hover. Per-column overrides let you provide custom static text or dynamic content derived from row data.

Installation

import '@toolbox-web/grid/features/tooltip';

Basic Usage

TypeScript

import { queryGrid } from '@toolbox-web/grid';
import '@toolbox-web/grid/features/tooltip';

const grid = queryGrid('tbw-grid');
grid.gridConfig = {
  columns: [
    { field: 'id', header: 'ID', width: 60 },
    { field: 'name', header: 'Name' },
    { field: 'email', header: 'Email Address' },
    { field: 'department', header: 'Department / Division' },
  ],
  features: { tooltip: true },
};

React

import '@toolbox-web/grid-react/features/tooltip';
import { DataGrid } from '@toolbox-web/grid-react';

function App({ data }) {
  return (
    <DataGrid
      rows={data}
      columns={[
        { field: 'id', header: 'ID', width: 60 },
        { field: 'name', header: 'Name' },
        { field: 'email', header: 'Email Address' },
      ]}
      tooltip
    />
  );
}

Vue

<script setup>
import '@toolbox-web/grid-vue/features/tooltip';
import { TbwGrid, TbwGridColumn } from '@toolbox-web/grid-vue';
</script>

<template>
  <TbwGrid :rows="data" tooltip>
    <TbwGridColumn field="id" header="ID" :width="60" />
    <TbwGridColumn field="name" header="Name" />
    <TbwGridColumn field="email" header="Email Address" />
  </TbwGrid>
</template>

Angular

import '@toolbox-web/grid-angular/features/tooltip';

import { Component } from '@angular/core';
import { Grid } from '@toolbox-web/grid-angular';

@Component({
  selector: 'app-grid',
  imports: [Grid],
  template: `
    <tbw-grid
      [rows]="rows"
      [columns]="columns"
      [tooltip]="true"
      style="height: 400px; display: block;">
    </tbw-grid>
  `,
})
export class GridComponent {
  rows = [];
  columns = [
    { field: 'id', header: 'ID', width: 60 },
    { field: 'name', header: 'Name' },
    { field: 'email', header: 'Email Address' },
  ];
}

Demo

Hover over truncated column headers or cell values to see tooltips. Toggle header/cell tooltips with the controls. The Job Title column demonstrates a custom headerTooltip string and a dynamic cellTooltip function.

TOOLTIP

Header tooltips Show tooltips when header text overflows

Cell tooltips Show tooltips when cell text overflows

Show source

Configuration

Option	Type	Default	Description
header	boolean	true	Enable automatic tooltips on overflowing header text
cell	boolean	true	Enable automatic tooltips on overflowing cell text

Per-Column Overrides

Override tooltip behavior on individual columns with headerTooltip and cellTooltip:

const columns = [
  // Static header tooltip
  { field: 'revenue', header: 'Rev.', headerTooltip: 'Total revenue in USD (before tax)' },

  // Dynamic cell tooltip that adds context beyond the cell value
  { field: 'name', cellTooltip: (ctx) => `Hired ${new Date(ctx.row.hireDate).toLocaleDateString()}` },

  // Disable tooltip for a specific column
  { field: 'actions', cellTooltip: false, headerTooltip: false },
];

Tip

If the cell value itself isn’t a plain row[field] read (for example, a “Full Name” computed from firstName + lastName), use valueAccessor on the column rather than computing it inside cellTooltip. The accessor runs once per row and is reused by sorting, filtering, exports, and the default tooltip — cellTooltip only adds extra information beyond the cell’s value.

Property	Type	Description
headerTooltip	false | string | (ctx) => string | null	Override header tooltip. false disables it, a string sets static text, a function returns dynamic text (return null to suppress).
cellTooltip	false | string | (ctx) => string | null	Override cell tooltip. Same signature as headerTooltip. The callback receives { value, row, field, column }.

Styling

The tooltip popover includes a directional arrow that automatically flips when the tooltip appears above the cell. It supports CSS custom properties:

Property	Default	Description
--tbw-tooltip-bg	var(--tbw-color-panel-bg)	Tooltip background color
--tbw-tooltip-fg	var(--tbw-color-panel-fg)	Tooltip text color
--tbw-tooltip-border	var(--tbw-color-border)	Tooltip border and arrow color
--tbw-tooltip-shadow	0 2px 8px rgba(0,0,0,.15)	Tooltip box shadow
--tbw-tooltip-radius	var(--tbw-border-radius)	Border radius
--tbw-tooltip-arrow-offset	12px	Horizontal offset of the arrow from the left edge

tbw-grid {
  --tbw-tooltip-bg: #1e1e2e;
  --tbw-tooltip-fg: #cdd6f4;
  --tbw-tooltip-border: #45475a;
}