Skip to main content

Tooltip

Description​

Tooltip component for displaying cell data on hover

The Tooltip component wraps the Grid and shows a tooltip when the user hovers over a cell. It uses the Grid API to resolve the hovered row, then either renders the cell value as plain text or passes the row to a custom content component.

Usage​

<Tooltip api={api} content={content} overflow={overflow} at={at} arrow={arrow} touch={touch} delay={delay} resolver={resolver} css={css}>
    <Grid ... ref={apiRef} />
</Tooltip>

Import the component from @svar-ui/react-grid:

import { Grid, Tooltip } from "@svar-ui/react-grid";

Parameters​

  • api (object) - (required) the Grid API object (ref={apiRef}). Used by the default resolver to look up the hovered row and column
  • content (Component) - (optional) a custom React component rendered as the tooltip body. Receives data — an object with row (the hovered row) and column (the hovered column). When omitted, falls back to the column's rendered cell value as plain text
  • overflow (boolean) - (optional) when true, the tooltip is shown only if the anchor text is not fully visible. Default: false
  • at (string) - (optional) the tooltip placement. Possible values: "point" (default), "top", "bottom", "left", "right", "top-start", "top-center", "top-end", "bottom-start", "bottom-center", "bottom-end", "left-start", "left-center", "left-end", "right-start", "right-center", "right-end". See Core Tooltip API for details
  • arrow (boolean) - (optional) shows an arrow pointing to the target element. Default: false
  • touch (boolean) - (optional) enables tooltips on touch devices. When false (default), tooltips are not shown; when true, they appear on tap
  • delay (number) - (optional) delay in milliseconds before the tooltip appears. Default: 300. The tooltip disappears immediately when the cursor leaves
  • resolver (function) - (optional) a custom resolver function. The default resolver reads the hovered cell and passes { data: { row: IRow, column: IColumn } } to the content component
  • css (string) - (optional) a CSS class name to apply to the tooltip element

Example​

import { useRef } from "react";
import { getData } from "./common/data";
import { Grid, Tooltip } from "@svar-ui/react-grid";
import CustomTooltip from "./CustomTooltip.jsx";

const { data, columns } = getData();

const apiRef = useRef(null);

<Tooltip content={CustomTooltip} api={apiRef.current}>
    <Grid data={data} columns={columns} ref={apiRef} />
</Tooltip>

CustomTooltip.jsx — receives data with row and column:

CustomTooltip.jsx
function CustomTooltip({ data }) {
    // data.row — the hovered row object
    // data.column — the hovered column object

    return (
        <div className="data">
            <div><b>Name:</b> {data.row.firstName} {data.row.lastName}</div>
            <div><b>City:</b> {data.row.city || "Unknown"}</div>
            <div><b>Email:</b> {data.row.email}</div>
        </div>
    );
}

export default CustomTooltip;

Related articles: