Adding tooltips

Adding a tooltip

You can add a default tooltip to a cell or your custom one. To add a tooltip, you should do the following:

1. Import the Tooltip component
2. To enable/disable tooltips, use the tooltip parameter of the columns property:
   • set it to false to disable
   • set it to true or do not specify to show a tooltip by default
   • define a function that takes an object to be processed as an argument and returns the string to show
3. Wrap the Grid element inside the Tooltip element and pass the Grid api to Tooltip using the api prop. In React, capture the Grid instance using a ref or a callback ref and expose it as the api value (see examples below). For more details see the Grid api

Example:

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

const { data } = getData();

const columns = [
    { id: "id", width: 50, tooltip: false },
    {
        id: "city",
        width: 100,
        header: "City",
    },
    {
        id: "firstName",
        header: "First Name",
        width: 150,
        tooltip: false,
    },
    {
        id: "lastName",
        header: "Last Name",
        width: 150,
        tooltip: false,
    },
    { id: "email", header: "Email" },
    { id: "companyName", header: "Company" },
    { id: "date", tooltip: (obj) => obj.date?.toDateString() },
];

export const Example = () => {
    // capture the Grid instance (api) using a callback ref
    const [api, setApi] = useState();

    return (
        <Tooltip api={api}>
            {/* ref={setApi} will receive the Grid instance and set it as api */}
            <Grid data={data} columns={columns} ref={setApi} />
        </Tooltip>
    );
};

Showing tooltip for overflowing text

To show a tooltip only when the cell text is not fully visible, set the overflow prop on the Tooltip component:

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

const { data } = getData();

const columns = [
    { id: "city", width: 100, header: "City" },
    { id: "email", header: "Email" },
    { id: "companyName", header: "Company" },
];

export const Example = () => {
    const [api, setApi] = useState();

    return (
        <Tooltip overflow api={api}>
            <Grid data={data} columns={columns} ref={setApi} />
        </Tooltip>
    );
};

Setting custom tooltip content

In the next example we add a custom React component as a tooltip:

• prepare and import your custom template that should be a React component
• import the Tooltip component and wrap the Grid element into the Tooltip element
• add the component itself as the value of the Tooltip content prop
• pass Tooltip the Grid api object (captured via ref)

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

const { data, columns } = getData();

export const ExampleWithCustomTooltip = () => {
    const [api, setApi] = useState();

    return (
        <Tooltip content={CustomTooltip} api={api}>
            <Grid data={data} columns={columns} ref={setApi} />
        </Tooltip>
    );
};

Example of a custom component:

CustomTooltip.jsx

export const CustomTooltip = ({ data }) => {
    // data.row — the hovered row object
    // data.column — the hovered column object
    return (
        <div className="data">
            <div className="text">
                {data.row.email}
            </div>
        </div>
    );
};

You can place the component in a separate file (e.g. CustomTooltip.jsx) and import it as shown above.

Example CSS for the custom component (in your stylesheet):

.data {
    background-color: white;
}
.text {
    font-size: 13px;
    color: black;
}

Changing a tooltip style

To customize the tooltip appearance, pass a CSS class name via the css prop and override the tooltip CSS variables scoped to that class:

<Tooltip api={api} css="my-tooltip">
    <Grid data={data} columns={columns} ref={setApi} />
</Tooltip>

.my-tooltip {
    --wx-tooltip-background: white;
    --wx-tooltip-font-color: black;
    --wx-tooltip-padding: 8px 12px;
    --wx-border-radius: 8px;
}

Available CSS variables:

Variable	Default	Description
--wx-tooltip-background	#2c2f3c	tooltip background color
--wx-tooltip-font-color	#ffffff	tooltip text color
--wx-tooltip-font	inherited	font shorthand
--wx-tooltip-padding	4px 8px	inner padding
--wx-tooltip-border	transparent	border color
--wx-tooltip-arrow-size	6px	size of the arrow
--wx-tooltip-point-offset	14px	offset for point placement
--wx-tooltip-z-index	1002	stacking order

---

Related sample: Tooltips for data cells

Related articles:

• Tooltip