Tooltip for scale area and links

Gantt
#1

Hi Support,

I wont to display tooltip in scale area.
if scale is “month” and gantt displays Jul 2022 , then tooltip should be “1/7/2022 - 31/7/2022”. like wise i want to display tool tips for Year , month ,week and day scales.

And I want to display tooltips for links too.

Thanks.
Rasagb

#2

Hello,
You can use tooltipFor method, which adds a tooltip for the specified Gantt element:
https://docs.dhtmlx.com/gantt/desktop__tooltips.html#tooltipfor ;
You can specify the CSS-selectors of the required Gantt element and create a template for a tooltip. To return the date of the cursor’s position, you need to use gantt.utils module with the help of dateFromPos method that gets the date of the specified horizontal position in the chart area. Here are related articles:
https://docs.dhtmlx.com/gantt/api__gantt_utils_other.html ;
https://docs.dhtmlx.com/gantt/api__gantt_datefrompos.html ;
For month tooltip, you can use gantt.date.month_start method and for week tooltip – gantt.date.week_start:
https://docs.dhtmlx.com/gantt/api__gantt_date_other.html#:~:text=%3B%20//%20->13-,month_start%20(%20date),--%20returns%20a%20Date ;
https://docs.dhtmlx.com/gantt/api__gantt_date_other.html#:~:text=%3B//%20->10-,week_start%20(%20date),--%20returns%20a%20Date ;
The example might look like:

const tooltips = gantt.ext.tooltips;
tooltips.tooltipFor({
    selector: ".gantt_scale_line:nth-child(2)",
    html: function (event, domElement) {
        const domHelper = gantt.utils.dom;
        const dateToStr = gantt.date.date_to_str("%d/%m/%Y");
        let pos = domHelper.getRelativeEventPosition(event, gantt.$task_scale);
        let firstDay = gantt.date.month_start(gantt.dateFromPos(pos.x));
        let lastDay = new Date(firstDay.getFullYear(), firstDay.getMonth() + 1, 0);
        return `${dateToStr(firstDay)} -  ${dateToStr(lastDay)}`;
    }
});

Please check the following snippet:
https://snippet.dhtmlx.com/a29qa7dh ;
To create a tooltip for links, you need to get the ID of the link. One of the options is to get it from the attribute of the DOM element:

tooltips.tooltipFor({
    selector: ".gantt_task_link",
    html: function (event, domElement) {
        let linkId = domElement.getAttribute(gantt.config.link_attribute);
        if (linkId) {
            ...  your tooltip's template 
        }
    }
});

Please check the example of how it might be implemented:
https://snippet.dhtmlx.com/bh5r3ujw