Skip to main content

Tooltip

Description

Tooltip helper

Usage

You can import the component from "wx-react-gantt".

Parameters

  • content - (optional) the React component

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 { 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;

Related articles: