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>
    );
};

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 YourCustomTooltip from "../custom/CustomTooltip.jsx";

const { data, columns } = getData();

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

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

Example of a custom component:

export const YourCustomTooltip = ({ data }) => {
    return (
        <div className="data">
            <div className="text">
                {data.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

The example below shows how to change the default style of tooltips via CSS classes. Include this in your global stylesheet or component CSS (depending on your setup):

/* in your stylesheet */
.wx-area .tooltip {
    background-color: white;
    color: black;
    border: 2px solid black;
}

---

Related sample: Tooltips for data cells