Skip to main content

Tooltips

This guide shows you how to add tooltips to task bars, links, and resource load cells using the Tooltip component.

Add the default tooltip​

To show task-name tooltips, wrap Gantt inside Tooltip and pass the Gantt API through the api prop. The api prop connects Tooltip to the Gantt instance so it can resolve which element the cursor is over.

import { useRef } from "react";
import { getData } from "../data";
import { Gantt, Tooltip } from "@svar-ui/react-gantt";

function App() {
  const data = getData();
  const api = useRef(null);

  return (
    <Tooltip api={api.current}>
      <Gantt
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
        ref={api}
      />
    </Tooltip>
  );
}

export default App;

Without content component, the tooltip shows the task name. To control what it displays, pass a custom component.

Add a custom tooltip​

Pass a React component to content to customize the tooltip. The component receives data prop with the resolved Gantt object for the element under the cursor.

To add a custom tooltip:

  • import the Tooltip component from Gantt
  • prepare your custom React template
  • import your custom template
  • add the template name as the value of the content prop on Tooltip
  • wrap the Gantt tag inside the Tooltip tag
  • pass the api object to Tooltip
import { useRef } from "react";
import { getData } from "../data";
import { Gantt, Tooltip } from "@svar-ui/react-gantt";
import MyTooltipContent from "./MyTooltipContent.jsx";

function App() {
  const data = getData();
  const api = useRef(null);

  return (
    <Tooltip api={api.current} content={MyTooltipContent}>
      <Gantt
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
        ref={api}
      />
    </Tooltip>
  );
}

export default App;

Only one of task, link, rollup, or resource is defined on data at a time. The following snippet handles task bars and links in a single component:

// MyTooltipContent.jsx
import { format } from "date-fns";

const mask = "yyyy.MM.dd";

function MyTooltipContent({ api, data }) {
  if (data.task) {
    return (
      <div className="tooltip">
        <div className="title">{data.task.text}</div>
        <div>Start: {format(data.task.start, mask)}</div>
        {data.task.end && <div>End: {format(data.task.end, mask)}</div>}
      </div>
    );
  } else if (data.link) {
    return (
      <div className="tooltip">
        <div>Link type: {data.link.type}</div>
      </div>
    );
  }
  return null;
}

export default MyTooltipContent;

Add tooltips in the resource load view​

To show tooltips over resource load cells, wrap both Gantt and ResourceLoad inside the same Tooltip. When the cursor is over a load cell, the content component receives the resource shape.

import { useRef } from "react";
import { getData, resources, assignments } from "../data";
import { Gantt, ResourceLoad, Tooltip } from "@svar-ui/react-gantt";
import MyResourceTooltip from "./MyResourceTooltip.jsx";

function App() {
  const data = getData();
  const api = useRef(null);

  return (
    <Tooltip api={api.current} content={MyResourceTooltip}>
      <div className="gantt">
        <Gantt
          ref={api}
          tasks={data.tasks}
          links={data.links}
          scales={data.scales}
          resources={resources}
          assignments={assignments}
        />
      </div>
      <div className="resource">
        <ResourceLoad api={api.current} />
      </div>
    </Tooltip>
  );
}

export default App;

In MyResourceTooltip.jsx, the resource shape contains the resource object with computed $total and $overloaded fields. To look up tasks assigned to this resource, call api.getResourceTasks().

// MyResourceTooltip.jsx
function MyResourceTooltip({ api, data }) {
  if (!data.resource) return null;

  const resource = data.resource;
  return (
    <div className="tooltip">
      <div>{resource.name}</div>
      <div>Total: {resource.$total}h</div>
      <div>Overloaded: {resource.$overloaded}</div>
    </div>
  );
}

export default MyResourceTooltip;

Show tooltip only for overflowing text​

By default, the tooltip is shown for every element. Set overflow to true to show it only when the anchor element's text is not fully visible. It's useful for grid cells where long text may be cut off.

<Tooltip overflow={true} api={api.current}>
  <Gantt ref={api} tasks={tasks} links={links} scales={scales} />
</Tooltip>

Elements without text content (links, rollups) are not affected, their tooltip is always shown regardless of the overflow setting.

Configure placement and appearance​

You can control tooltip placement and behavior with at, arrow, overflow, touch, and delay props. See the Tooltip API for the full reference.

The example below positions the tooltip above the cursor with an arrow and a 500 ms delay:

<Tooltip api={api.current} at="top" arrow delay={500}>
  <Gantt ref={api} tasks={tasks} links={links} scales={scales} />
</Tooltip>

Style the tooltip​

You can add a custom CSS class to the tooltip via the css property. Use it to override default CSS variables and customize the tooltip appearance:

<Tooltip api={api.current} css="my-tooltip">
  <Gantt ref={api} tasks={tasks} links={links} scales={scales} />
</Tooltip>
.my-tooltip {
  --wx-tooltip-background: white;
  --wx-tooltip-font-color: black;
  --wx-tooltip-padding: 8px 12px;
  --wx-border-radius: 8px;
}

Available CSS variables:

  • --wx-tooltip-font — font shorthand (weight, size, family)
  • --wx-tooltip-font-color — text color. Default: #ffffff
  • --wx-tooltip-background — background color. Default: #2c2f3c
  • --wx-tooltip-border — border color. Default: transparent
  • --wx-tooltip-padding — inner padding. Default: 4px 8px
  • --wx-tooltip-point-offset — offset from the target point. Default: 14px
  • --wx-tooltip-arrow-size — arrow size. Default: 6px
  • --wx-tooltip-z-index — stacking order. Default: 1002

Related samples:

Related articles: