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 element with the Tooltip component
• pass the api object to the Tooltip component

Example:

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

const data = getData();
const api = useRef(null);

export default function App() {
  return (
    <Tooltip api={api}>
      <Gantt
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
        ref={api}
      />
    </Tooltip>
  );
}

Adding a custom tooltip

To add a custom template to a tooltip:

• import the Tooltip component from Gantt
• prepare your custom React component
• import your custom component
• add the custom component as the value of the Tooltip content prop
• wrap the Gantt element with the Tooltip component
• pass the api object to the Tooltip component

Example:

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

const data = getData();
const api = useRef(null);

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

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

import { format } from "date-fns";

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

CSS (separate file, e.g., MyTooltipContent.css):

.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;
}

---

Related sample: Tooltips