Tooltip API

Description

Tooltip component for Gantt — adds tooltips to task bars, links, and resource load cells

Usage

type TooltipContentData =
  | { task: ITask; segmentIndex: number | null }
  | { link: ILink }
  | { rollup: ITask }
  | { resource: IResource };

Tooltip: Component<{
  api?: IApi;
  content?: Component<{
    api: IApi;
    data: TooltipContentData;
  }>;
  resolver?: (element: HTMLElement, ev: MouseEvent) => object;
  at?: string;
  arrow?: boolean;
  overflow?: boolean;
  touch?: boolean;
  delay?: number;
  css?: string;
}>;

Import the component from @svar-ui/react-gantt.

Parameters

• api - (optional) the Gantt API object. Required for the default resolver to identify the element under the cursor. You can omit it only if you supply a custom resolver.
• content - (optional) a React component that renders the tooltip body. Default: null (shows the task name). The component receives two props:
  • api - the Gantt API instance
  • data - a discriminated union describing the hovered element. Exactly one of the following shapes is active at a time:
    • { task: ITask; segmentIndex: number | null } — for task bars; segmentIndex is null for non-split tasks. See tasks.
    • { link: ILink } — for link lines. See links.
    • { rollup: ITask } — for rollup bars. See tasks.
    • { resource: IResource } — for resource load cells. See resources.
• resolver - (optional) a custom function that receives the hovered DOM element and the pointer event, and returns the data object passed to content. Replaces the default resolver.
• at - (optional) tooltip placement relative to the cursor or target element. Default: "point". Accepts "point", "top", "bottom", "left", "right", and directional variants: "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 - (optional) shows an arrow pointing to the target element. Default: false.
• overflow - (optional) when true, the tooltip is shown only if the text in the anchor element is not fully visible. Default: false.
• touch - (optional) enables tooltips on touch devices. Default: false.
• delay - (optional) delay in milliseconds before the tooltip appears. Default: 300. The tooltip disappears immediately when the cursor leaves.
• css - (optional) a CSS class name applied to the tooltip. Use it to override default CSS variables.

Example

The example below adds the default tooltip that shows the task name. Pass ref={apiRef} on Gantt and forward the same api to Tooltip. For more details, refer to How to access Gantt API.

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

function MyGantt() {
  const data = getData();
  const apiRef = useRef(null);

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

export default MyGantt;

---

Related articles:

• How to access Gantt API
• Adding tooltips