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 tag inside the Tooltip tag and bind it to the Grid api (see how to access the Grid API in the api docs). In React this is done by obtaining the Grid instance (ref) and storing it in a variable named api, then passing that api to the Tooltip via the api prop.

Example:

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

export default function ExampleTooltip() {
  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() },
  ];

  // Keep the API object in the same variable name `api`
  const [api, setApi] = useState(null);
  // Use a callback ref to capture the Grid instance and store it as `api`
  const setGridRef = useCallback((node) => {
    setApi(node);
  }, []);

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

Setting custom tooltip content

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

• prepare and import your custom template as a React component
• import the Tooltip component and wrap the Grid tag into the Tooltip tag
• add the component (constructor) as the value of the Tooltip content attribute
• bind Tooltip to the Grid api object (obtain the Grid instance and pass it as the api prop)

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

export default function CustomTooltipExample() {
  const { data, columns } = getData();

  const [api, setApi] = useState(null);
  const setGridRef = useCallback((node) => setApi(node), []);

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

Example of a custom component:

// ../custom/CustomTooltip.jsx
export default function CustomTooltip({ data }) {
  return (
    <div className="data">
      <div className="text">{data.email}</div>
    </div>
  );
}

.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 global CSS classes. Add this to your global stylesheet (or a CSS module/global styles file so the selector applies globally):

.wx-area .tooltip {
  background-color: white;
  color: black;
  border: 2px solid black;
}