I tried using the title attribute to achieve a similar effect. Just sharing this approach for your reference — feel free to share any suggestions or improvements!
export function MyTaskContentWithTitle({data}: {data: any}) {
const title = "The content in title area";
return (
<div
title={title}
style={{
position: 'relative',
width: '100%',
height: '100%',
padding: '2px',
fontSize: 10,
pointerEvents: 'auto',
zIndex: 10,
}}>
<div className="wx-content ellipsis">{data.text || '\u00A0'}</div>
</div>
);
}
You can pass a custom component to the taskTemplate prop to control how each task is rendered in the Gantt chart.
<Gantt
init={init}
taskTypes={taskTypes}
tasks={data.tasks}
links={data.links}
scales={data.scales}
taskTemplate={MyTaskContentWithTitle}
/>
In index.css add
.ellipsis {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
display: block !important;
}
