Cells

Cell Tooltips & Popovers

Use custom cell renderers to add tooltips or popovers to cells. LyteNyte Grid is unopinionated, allowing direct integration with your existing components.

Cell Tooltips

The demo below renders a Radix UI tooltip component. Hover over a cell in the Symbol column to view the symbol’s network. Use this pattern to integrate any auxiliary component into your cells.

1
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
2

77 collapsed lines
3
import "@1771technologies/lytenyte-pro/light-dark.css";
4
import {
5
  ExchangeCell,
6
  makePerfHeaderCell,
7
  NetworkCell,
8
  PercentCell,
9
  PercentCellPositiveNegative,
10
  SymbolCell,
11
} from "./components.jsx";
12
import type { DEXPerformanceData } from "@1771technologies/grid-sample-data/dex-pairs-performance";
13
import { data } from "@1771technologies/grid-sample-data/dex-pairs-performance";
14
import { Tooltip } from "radix-ui";
15

16
export interface GridSpec {
17
  readonly data: DEXPerformanceData;
18
}
19

20
const columns: Grid.Column<GridSpec>[] = [
21
  { id: "symbol", cellRenderer: SymbolCell, width: 250, name: "Symbol" },
22
  { id: "network", cellRenderer: NetworkCell, width: 220, name: "Network", hide: true },
23
  { id: "exchange", cellRenderer: ExchangeCell, width: 220, name: "Exchange", hide: true },
24

25
  {
26
    id: "change24h",
27
    cellRenderer: PercentCellPositiveNegative,
28
    headerRenderer: makePerfHeaderCell("Change", "24h"),
29
    name: "Change % 24h",
30
    type: "number,",
31
  },
32

33
  {
34
    id: "perf1w",
35
    cellRenderer: PercentCellPositiveNegative,
36
    headerRenderer: makePerfHeaderCell("Perf %", "1w"),
37
    name: "Perf % 1W",
38
    type: "number,",
39
  },
40
  {
41
    id: "perf1m",
42
    cellRenderer: PercentCellPositiveNegative,
43
    headerRenderer: makePerfHeaderCell("Perf %", "1m"),
44
    name: "Perf % 1M",
45
    type: "number,",
46
  },
47
  {
48
    id: "perf3m",
49
    cellRenderer: PercentCellPositiveNegative,
50
    headerRenderer: makePerfHeaderCell("Perf %", "3m"),
51
    name: "Perf % 3M",
52
    type: "number,",
53
  },
54
  {
55
    id: "perf6m",
56
    cellRenderer: PercentCellPositiveNegative,
57
    headerRenderer: makePerfHeaderCell("Perf %", "6m"),
58
    name: "Perf % 6M",
59
    type: "number,",
60
  },
61
  {
62
    id: "perfYtd",
63
    cellRenderer: PercentCellPositiveNegative,
64
    headerRenderer: makePerfHeaderCell("Perf %", "YTD"),
65
    name: "Perf % YTD",
66
    type: "number",
67
  },
68
  { id: "volatility", cellRenderer: PercentCell, name: "Volatility", type: "number" },
69
  {
70
    id: "volatility1m",
71
    cellRenderer: PercentCell,
72
    headerRenderer: makePerfHeaderCell("Volatility", "1m"),
73
    name: "Volatility 1M",
74
    type: "number",
75
  },
76
];
77

78
const base: Grid.ColumnBase<GridSpec> = { width: 80 };
79

80
export default function CellDemo() {
81
  const ds = useClientDataSource({ data: data });
82

83
  return (
84
    <div
85
      className="ln-grid ln-cell:text-xs ln-header:text-xs ln-header:text-ln-text-xlight"
86
      style={{ height: 500 }}
87
    >
88
      <Tooltip.TooltipProvider>
89
        <Grid columns={columns} columnBase={base} rowSource={ds} />
90
      </Tooltip.TooltipProvider>
91
    </div>
92
  );
93
}

1
import "@1771technologies/lytenyte-pro/components.css";
2
import type { ClassValue } from "clsx";
3
import clsx from "clsx";
4
import { twMerge } from "tailwind-merge";
5
import { exchanges, networks, symbols } from "@1771technologies/grid-sample-data/dex-pairs-performance";
6
import { Tooltip } from "radix-ui";
7

8
export function tw(...c: ClassValue[]) {
9
  return twMerge(clsx(...c));
10
}
11
import type { Grid } from "@1771technologies/lytenyte-pro";
12
import type { GridSpec } from "./demo";
13

14
export function SymbolCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
15
  if (!api.rowIsLeaf(row) || !row.data) return null;
16

17
  const ticker = row.data.symbolTicker;
18
  const symbol = row.data.symbol;
19
  const image = symbols[row.data.symbolTicker];
20

21
  return (
22
    <Tooltip.Root delayDuration={100}>
23
      <Tooltip.Trigger asChild className="h-ful w-full">
24
        <div className="grid grid-cols-[20px_auto_1fr] items-center gap-1.5">
25
          <div>
26
            <img
27
              src={image}
28
              alt={`Logo for symbol ${symbol}`}
29
              className="h-full w-full overflow-hidden rounded-full"
30
            />
31
          </div>
32
          <div className="bg-ln-gray-20 text-ln-text-dark flex h-fit items-center justify-center rounded-lg px-2 py-px text-[10px]">
33
            {ticker}
34
          </div>
35
          <div className="w-full overflow-hidden text-ellipsis">{symbol.split("/")[0]}</div>
36
        </div>
37
      </Tooltip.Trigger>
38
      <Tooltip.Portal>
39
        <Tooltip.Content className="border-ln-border-xstrong bg-ln-bg-popover z-20 grid grid-cols-[auto_20px_1fr] items-center gap-1.5 rounded-lg border p-2 text-xs">
40
          <div className="font-bold">Network: </div>
41
          <img
42
            src={networks[row.data.network]}
43
            alt={`Logo for network ${row.data.network}`}
44
            className="h-full w-full overflow-hidden rounded-full"
45
          />
46
          <div className="w-full overflow-hidden text-ellipsis">{row.data.network}</div>
47
        </Tooltip.Content>
48
      </Tooltip.Portal>
49
    </Tooltip.Root>
50
  );
51
}
52

53
export function NetworkCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
54
  if (!api.rowIsLeaf(row) || !row.data) return null;
55

56
  const name = row.data.network;
57
  const image = networks[name];
58

59
  return (
60
    <div className="grid grid-cols-[20px_1fr] items-center gap-1.5">
61
      <div>
62
        <img
63
          src={image}
64
          alt={`Logo for network ${name}`}
65
          className="h-full w-full overflow-hidden rounded-full"
66
        />
67
      </div>
68
      <div className="w-full overflow-hidden text-ellipsis">{name}</div>
69
    </div>
70
  );
71
}
72

73
export function ExchangeCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
74
  if (!api.rowIsLeaf(row) || !row.data) return null;
75

76
  const name = row.data.exchange;
77
  const image = exchanges[name];
78

79
  return (
80
    <div className="grid grid-cols-[20px_1fr] items-center gap-1.5">
81
      <div>
82
        <img
83
          src={image}
84
          alt={`Logo for exchange ${name}`}
85
          className="h-full w-full overflow-hidden rounded-full"
86
        />
87
      </div>
88
      <div className="w-full overflow-hidden text-ellipsis">{name}</div>
89
    </div>
90
  );
91
}
92

93
export function PercentCellPositiveNegative({ api, column, row }: Grid.T.CellRendererParams<GridSpec>) {
94
  if (!api.rowIsLeaf(row) || !row.data) return null;
95

96
  const field = api.columnField(column, row);
97

98
  if (typeof field !== "number") return "-";
99

100
  const value = (field > 0 ? "+" : "") + (field * 100).toFixed(2) + "%";
101

102
  return (
103
    <div
104
      className={tw(
105
        "h-ful flex w-full items-center justify-end tabular-nums",
106
        field < 0 ? "text-red-600 dark:text-red-300" : "text-green-600 dark:text-green-300",
107
      )}
108
    >
109
      {value}
110
    </div>
111
  );
112
}
113

114
export function PercentCell({ api, column, row }: Grid.T.CellRendererParams<GridSpec>) {
115
  if (!api.rowIsLeaf(row) || !row.data) return null;
116

117
  const field = api.columnField(column, row);
118

119
  if (typeof field !== "number") return "-";
120

121
  const value = (field > 0 ? "+" : "") + (field * 100).toFixed(2) + "%";
122

123
  return <div className="h-ful flex w-full items-center justify-end tabular-nums">{value}</div>;
124
}
125

126
export const makePerfHeaderCell = (name: string, subname: string) => {
127
  return (_: Grid.T.HeaderParams<GridSpec>) => {
128
    return (
129
      <div className="flex h-full w-full flex-col items-end justify-center tabular-nums">
130
        <div>{name}</div>
131
        <div className="text-ln-text-light font-mono uppercase">{subname}</div>
132
      </div>
133
    );
134
  };
135
};

This implementation matches standard Radix UI documentation. LyteNyte Grid requires no wrappers or overrides, ensuring compatibility with any React tooltip component.

1
export function SymbolCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
2
  if (!api.rowIsLeaf(row) || !row.data) return null;
3

4
  const ticker = row.data.symbolTicker;
5
  const symbol = row.data.symbol;
6
  const image = symbols[row.data.symbolTicker];
7

8
  return (
9
    <Tooltip.Root delayDuration={100}>
10
      <Tooltip.Trigger asChild className="h-ful w-full">
11
        <div className="grid grid-cols-[20px_auto_1fr] items-center gap-1.5">
12
          <div>
13
            <img
14
              src={image}
15
              alt={`Logo for symbol ${symbol}`}
16
              className="h-full w-full overflow-hidden rounded-full"
17
            />
18
          </div>
19
          <div className="bg-ln-gray-20 text-ln-text-dark flex h-fit items-center justify-center rounded-lg px-2 py-px text-[10px]">
20
            {ticker}
21
          </div>
22
          <div className="w-full overflow-hidden text-ellipsis">{symbol.split("/")[0]}</div>
23
        </div>
24
      </Tooltip.Trigger>
25
      <Tooltip.Portal>
26
        <Tooltip.Content className="border-ln-border-xstrong bg-ln-bg-popover z-20 grid grid-cols-[auto_20px_1fr] items-center gap-1.5 rounded-lg border p-2 text-xs">
27
          <div className="font-bold">Network: </div>
28
          <img
29
            src={networks[row.data.network]}
30
            alt={`Logo for network ${row.data.network}`}
31
            className="h-full w-full overflow-hidden rounded-full"
32
          />
33
          <div className="w-full overflow-hidden text-ellipsis">{row.data.network}</div>
34
        </Tooltip.Content>
35
      </Tooltip.Portal>
36
    </Tooltip.Root>
37
  );
38
}

Cell Popovers

You can also use a popover to show additional details. In the demo below, focusing a cell in the Symbol column opens a popover with the symbol’s network.

Cell Popovers

demo.tsx
components.tsx

1
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
2
import "@1771technologies/lytenyte-pro/components.css";
3

78 collapsed lines
4
import "@1771technologies/lytenyte-pro/light-dark.css";
5
import {
6
  ExchangeCell,
7
  makePerfHeaderCell,
8
  NetworkCell,
9
  PercentCell,
10
  PercentCellPositiveNegative,
11
  SymbolCell,
12
} from "./components.jsx";
13
import type { DEXPerformanceData } from "@1771technologies/grid-sample-data/dex-pairs-performance";
14
import { data, networks } from "@1771technologies/grid-sample-data/dex-pairs-performance";
15
import { useMemo, useState } from "react";
16
import { Popover } from "@1771technologies/lytenyte-pro/components";
17

18
export interface GridSpec {
19
  readonly data: DEXPerformanceData;
20
}
21

22
const columns: Grid.Column<GridSpec>[] = [
23
  { id: "symbol", cellRenderer: SymbolCell, width: 250, name: "Symbol" },
24
  { id: "network", cellRenderer: NetworkCell, width: 220, name: "Network", hide: true },
25
  { id: "exchange", cellRenderer: ExchangeCell, width: 220, name: "Exchange", hide: true },
26

27
  {
28
    id: "change24h",
29
    cellRenderer: PercentCellPositiveNegative,
30
    headerRenderer: makePerfHeaderCell("Change", "24h"),
31
    name: "Change % 24h",
32
    type: "number,",
33
  },
34

35
  {
36
    id: "perf1w",
37
    cellRenderer: PercentCellPositiveNegative,
38
    headerRenderer: makePerfHeaderCell("Perf %", "1w"),
39
    name: "Perf % 1W",
40
    type: "number,",
41
  },
42
  {
43
    id: "perf1m",
44
    cellRenderer: PercentCellPositiveNegative,
45
    headerRenderer: makePerfHeaderCell("Perf %", "1m"),
46
    name: "Perf % 1M",
47
    type: "number,",
48
  },
49
  {
50
    id: "perf3m",
51
    cellRenderer: PercentCellPositiveNegative,
52
    headerRenderer: makePerfHeaderCell("Perf %", "3m"),
53
    name: "Perf % 3M",
54
    type: "number,",
55
  },
56
  {
57
    id: "perf6m",
58
    cellRenderer: PercentCellPositiveNegative,
59
    headerRenderer: makePerfHeaderCell("Perf %", "6m"),
60
    name: "Perf % 6M",
61
    type: "number,",
62
  },
63
  {
64
    id: "perfYtd",
65
    cellRenderer: PercentCellPositiveNegative,
66
    headerRenderer: makePerfHeaderCell("Perf %", "YTD"),
67
    name: "Perf % YTD",
68
    type: "number",
69
  },
70
  { id: "volatility", cellRenderer: PercentCell, name: "Volatility", type: "number" },
71
  {
72
    id: "volatility1m",
73
    cellRenderer: PercentCell,
74
    headerRenderer: makePerfHeaderCell("Volatility", "1m"),
75
    name: "Volatility 1M",
76
    type: "number",
77
  },
78
];
79

80
const base: Grid.ColumnBase<GridSpec> = { width: 80 };
81

82
export default function CellDemo() {
83
  const [network, setNetwork] = useState<string | null>(null);
84
  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
85
  const ds = useClientDataSource({ data: data });
86

87
  return (
88
    <div
89
      className="ln-grid ln-cell:text-xs ln-header:text-xs ln-header:text-ln-text-xlight"
90
      style={{ height: 500 }}
91
    >
92
      <Grid
93
        columns={columns}
94
        columnBase={base}
95
        rowSource={ds}
96
        events={useMemo<Grid.Events<GridSpec>>(() => {
97
          return {
98
            cell: {
99
              focus: ({ column, event, row, api }) => {
100
                if (column.id !== "symbol" || !api.rowIsLeaf(row)) return;
101

102
                setNetwork(row.data.network);
103
                setAnchor(event.target);
104
              },
105
              blur: () => {
106
                setNetwork(null);
107
                setAnchor(null);
108
              },
109
            },
110
          };
111
        }, [])}
112
      />
113
      <Popover
114
        anchor={anchor}
115
        open={!!network}
116
        modal={false}
117
        focusTrap={false}
118
        hide
119
        placement="top"
120
        sideOffset={2}
121
      >
122
        {network && (
123
          <Popover.Container className="bg-ln-bg-popover border-ln-border-xstrong grid grid-cols-[auto_20px_1fr] items-center gap-1.5 rounded-lg border p-2 text-xs">
124
            <div className="font-bold">Network:</div>
125

126
            <div>
127
              <img
128
                src={networks[network]}
129
                alt={`Logo for network ${network}`}
130
                className="h-full w-full overflow-hidden rounded-full"
131
              />
132
            </div>
133
            <div className="w-full overflow-hidden text-ellipsis">{network}</div>
134
          </Popover.Container>
135
        )}
136
      </Popover>
137
    </div>
138
  );
139
}

1
import "@1771technologies/lytenyte-pro/components.css";
2
import type { ClassValue } from "clsx";
3
import clsx from "clsx";
4
import { twMerge } from "tailwind-merge";
5
import { exchanges, networks, symbols } from "@1771technologies/grid-sample-data/dex-pairs-performance";
6

7
export function tw(...c: ClassValue[]) {
8
  return twMerge(clsx(...c));
9
}
10
import type { Grid } from "@1771technologies/lytenyte-pro";
11
import type { GridSpec } from "./demo";
12

13
export function SymbolCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
14
  if (!api.rowIsLeaf(row) || !row.data) return null;
15

16
  const ticker = row.data.symbolTicker;
17
  const symbol = row.data.symbol;
18
  const image = symbols[row.data.symbolTicker];
19

20
  return (
21
    <div className="grid grid-cols-[20px_auto_1fr] items-center gap-1.5">
22
      <div>
23
        <img
24
          src={image}
25
          alt={`Logo for symbol ${symbol}`}
26
          className="h-full w-full overflow-hidden rounded-full"
27
        />
28
      </div>
29
      <div className="bg-ln-gray-20 text-ln-text-dark flex h-fit items-center justify-center rounded-lg px-2 py-px text-[10px]">
30
        {ticker}
31
      </div>
32
      <div className="w-full overflow-hidden text-ellipsis">{symbol.split("/")[0]}</div>
33
    </div>
34
  );
35
}
36

37
export function NetworkCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
38
  if (!api.rowIsLeaf(row) || !row.data) return null;
39

40
  const name = row.data.network;
41
  const image = networks[name];
42

43
  return (
44
    <div className="grid grid-cols-[20px_1fr] items-center gap-1.5">
45
      <div>
46
        <img
47
          src={image}
48
          alt={`Logo for network ${name}`}
49
          className="h-full w-full overflow-hidden rounded-full"
50
        />
51
      </div>
52
      <div className="w-full overflow-hidden text-ellipsis">{name}</div>
53
    </div>
54
  );
55
}
56

57
export function ExchangeCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
58
  if (!api.rowIsLeaf(row) || !row.data) return null;
59

60
  const name = row.data.exchange;
61
  const image = exchanges[name];
62

63
  return (
64
    <div className="grid grid-cols-[20px_1fr] items-center gap-1.5">
65
      <div>
66
        <img
67
          src={image}
68
          alt={`Logo for exchange ${name}`}
69
          className="h-full w-full overflow-hidden rounded-full"
70
        />
71
      </div>
72
      <div className="w-full overflow-hidden text-ellipsis">{name}</div>
73
    </div>
74
  );
75
}
76

77
export function PercentCellPositiveNegative({ api, column, row }: Grid.T.CellRendererParams<GridSpec>) {
78
  if (!api.rowIsLeaf(row) || !row.data) return null;
79

80
  const field = api.columnField(column, row);
81

82
  if (typeof field !== "number") return "-";
83

84
  const value = (field > 0 ? "+" : "") + (field * 100).toFixed(2) + "%";
85

86
  return (
87
    <div
88
      className={tw(
89
        "h-ful flex w-full items-center justify-end tabular-nums",
90
        field < 0 ? "text-red-600 dark:text-red-300" : "text-green-600 dark:text-green-300",
91
      )}
92
    >
93
      {value}
94
    </div>
95
  );
96
}
97

98
export function PercentCell({ api, column, row }: Grid.T.CellRendererParams<GridSpec>) {
99
  if (!api.rowIsLeaf(row) || !row.data) return null;
100

101
  const field = api.columnField(column, row);
102

103
  if (typeof field !== "number") return "-";
104

105
  const value = (field > 0 ? "+" : "") + (field * 100).toFixed(2) + "%";
106

107
  return <div className="h-ful flex w-full items-center justify-end tabular-nums">{value}</div>;
108
}
109

110
export const makePerfHeaderCell = (name: string, subname: string) => {
111
  return (_: Grid.T.HeaderParams<GridSpec>) => {
112
    return (
113
      <div className="flex h-full w-full flex-col items-end justify-center tabular-nums">
114
        <div>{name}</div>
115
        <div className="text-ln-text-light font-mono uppercase">{subname}</div>
116
      </div>
117
    );
118
  };
119
};

Instead of rendering the popover within a custom cell renderer, this demo renders it as a grid sibling. On cell focus, React state stores the focused cell element and network name, and the demo shows the popover when that state is set.

1
export default function Demo() {
2
  const [network, setNetwork] = useState<string | null>(null);
3
  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
4
  const ds = useClientDataSource({ data: data });
5
  return (
6
    <div
7
      className="ln-grid ln-cell:text-xs ln-header:text-xs ln-header:text-ln-text-xlight"
8
      style={{ height: 500 }}
9
    >
10
      <Grid
11
        columns={columns}
12
        columnBase={base}
13
        rowSource={ds}
14
        events={useMemo<Grid.Events<GridSpec>>(() => {
15
          return {
16
            cell: {
17
              focus: ({ column, event, row, api }) => {
18
                if (column.id !== "symbol" || !api.rowIsLeaf(row)) return;
19

20
                setNetwork(row.data.network);
21
                setAnchor(event.target);
22
              },
23
              blur: () => {
24
                setNetwork(null);
25
                setAnchor(null);
26
              },
27
            },
28
          };
29
        }, [])}
30
      />
31
      <Popover anchor={anchor} open={!!network} modal={false} focusTrap={false} hide>
32
        {network && (
33
          <Popover.Container className="grid grid-cols-[20px_auto_1fr] items-center gap-1.5">
34
            <Popover.Arrow />
35

36
            <div>
37
              <img
38
                src={networks[network]}
39
                alt={`Logo for network ${network}`}
40
                className="h-full w-full overflow-hidden rounded-full"
41
              />
42
            </div>
43
            <div className="w-full overflow-hidden text-ellipsis">{network}</div>
44
          </Popover.Container>
45
        )}
46
      </Popover>
47
    </div>
48
  );
49
}

To implement popovers, you can also extend the grid API with an imperative method or manage popover behavior via React context. LyteNyte Grid is unopinionated, supporting the architecture that best fits your requirements.

Info

The demo uses LyteNyte Grid’s popover component, exclusive to LyteNyte Grid PRO. You can replace it with any popover component. For details on the built-in component, see the Popover guide.

Next Steps

Cell Renderers: Render custom cell content with React components.
Cell Editing: Edit cell values and commit updates in the grid.
Cell Diff Flashing: Highlight value changes within cells with visual flashes.

Cell Tooltips & Popovers

Cell Tooltips

Cell Tooltips

Cell Popovers

Cell Popovers

Info

Next Steps

On this page