Skip to main content

Tooltip

Description​

Tooltip helper

Usage​

Tooltip: Component<{ content?: Component<{ data: ITask }>; api?: IApi; () => any }>;

You can import the component from "@svar-ui/react-gantt".

Parameters​

  • content - (optional) the React component that receives props:
    • data - (required) the tasks object
    • api - (required) the API gateway object for interacting with Gantt API

If the attribute is not added, then the tooltip will display the task name.

Example​

The example below shows how to add the default tooltip. Do not forget to pass the api object to Tooltip (for more details, refer to How to access Gantt API). Other usage examples see here: Adding tooltips

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

const data = getData();

export default function Example() {
  // Hold the Gantt API instance
  const [api, setApi] = useState<any>(null);

  // Use a callback ref to obtain the Gantt instance and set api state
  const setApiRef = useCallback((node: any) => {
    // node will be the Gantt instance when mounted
    setApi(node);
  }, []);

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

Related articles: