Adding tooltips

Adding a default tooltip

To add a default tooltip that displays the task name, do the following:

• import the Tooltip component from Gantt
• wrap the Gantt tag into the Tooltip tag
• pass the api object to the Tooltip component

Example:

import { getData } from "../data";
import { Gantt, Tooltip } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import { useRef, useEffect } from "react";

function MyComponent() {
  const data = getData();
  const apiRef = useRef();

  useEffect(() => {
    if (apiRef.current) {
      // perform any operations with apiRef
    }
  }, [apiRef]);

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

export default MyComponent;

Adding a custom tooltip

To add a custom template to a tooltip:

• import the Tooltip component from Gantt
• prepare you custom React template
• import your custom template
• add the name of the template as the value of the Tooltip content attribute
• wrap the Gantt tag into the Tooltip tag
• pass the api object to the Tooltip component

Example:

import { getData } from "../data";
import { Gantt, Tooltip } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import MyTooltipContent from "../custom/MyTooltipContent.jsx";
import { useRef } from "react";

const ExampleComponent = () => {
  const data = getData();
  const apiRef = useRef();

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

export default ExampleComponent;

Below is an example of the custom template for a tooltip:

import { format } from "date-fns";

const DataComponent = ({ data }) => {
  const mask = "yyyy.MM.dd";

  if (!data) return null;

  return (
    <div className="data">
      <div className="text">
        <span className="caption">{data.type}:</span>
        {data.text}
      </div>
      <div className="text">
        <span className="caption">start:</span>
        {format(data.start, mask)}
      </div>
      {data.end && (
        <div className="text">
          <span className="caption">end:</span>
          {format(data.end, mask)}
        </div>
      )}
    </div>
  );
};

export default DataComponent;

.data {
  white-space: nowrap;
  background-color: var(--wx-tooltip-background);
  padding: 3px 8px;
}

.text {
  font-family: var(--wx-font-family);
  color: var(--wx-color-primary-font);
  font-size: 13px;
  text-transform: capitalize;
  margin-bottom: 5px;
}

.text:last-child {
  margin-bottom: 0;
}

.caption {
  font-weight: 700;
}