Resource tooltip

Gantt React Gantt
#1

Hi, How can I make a tooltip for the left side of the resources if the text length is wider than the line

#2

Hello,
Unfortunately, there is no built-in solution for this, but you can try manually determining the column width and comparing it to the text width:

gantt.attachEvent("onGanttReady", () => {
    const tooltips = gantt.ext.tooltips;

    tooltips.tooltipFor({
        selector: ".gantt_row[resource_id]",
        html: (event, node) => {
            const resourceId = node.getAttribute("resource_id");
            const store = gantt.getDatastore(gantt.config.resource_store);
            const resource = store.getItem(resourceId);
            const assignments = getResourceAssignments(resourceId, store);

            const totalDuration = assignments.reduce((sum, { task_id, value }) => 
                sum + gantt.getTask(task_id).duration * value, 0
            );

            const cell = node.querySelector(".gantt_cell.gantt_cell_tree");
            if (cell) {
                const cellWidth = cell.offsetWidth;
                const textContainer = cell.querySelector(".gantt_tree_content");

                if (textContainer) {
                    const textWidth = getTextWidth(textContainer.textContent, getComputedStyle(textContainer).font);
                    const nonTextElementsWidth = [...cell.children]
                        .filter(child => child !== textContainer)
                        .reduce((total, child) => total + child.offsetWidth, 0);

                    if (textWidth + nonTextElementsWidth > cellWidth) {
                        return `
                            <b>Resource:</b> ${resource.text}<br>
                            <b>Tasks assigned:</b> ${assignments.length}<br>
                            <b>Total load:</b> ${totalDuration || 0}h
                        `;
                    }
                }
            }
            return "";
        }
    });

    const getTextWidth = (text, font) => {
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");
        context.font = font || "12px Arial";
        return context.measureText(text).width;
    };
});

Here is an example: DHTMLX Snippet Tool . Please note that this example requires further development and testing.

1 Like