Gantt - tooltipTemplate for indicator

[MauriceLapre]

Hi Bryntum,

I'm trying to change the tooltip on a custom indicator but tooltipTemplate doesn't seem to work. Tried this in the indicator demo:

Schermafbeelding 2025-04-17 152346.png (38.85 KiB) Viewed 143 times

It's still showing the default template.

Could you please have a look? Thank you.

Kind regards,
Maurice

[tasnim]

Hi,

tooltipTemplate needs to be defined under items
https://bryntum.com/products/gantt/docs/api/Gantt/feature/Indicators#config-tooltipTemplate

    features : {
        // Enabling and configuring the Indicators feature
        indicators : {
            items : {
                // Early start/end dates indicator disabled
                earlyDates : false,

            // Custom indicator added
            beer : taskRecord =>  taskRecord.name.startsWith('C') ? {
                startDate : DateHelper.add(taskRecord.endDate, 2, 'day'),
                cls       : 'beer',
                iconCls   : 'b-fa b-fa-beer',
                name      : 'Post-task celebration beer'
            } : null,

            
        },
        tooltipTemplate() {
            return 'hello'
        }
    }
},

[MauriceLapre]

Hi Tasnim,
But then it will be applied to all indicators, correct? I just want to change this indicator's tooltip. How can I do that?

[tasnim]

You can use conditionals for that. Here is the default tooltipTemplate code

            tooltipTemplate(data) {
                const
                    { indicator } = data,
                    encodedName   = StringHelper.encodeHtml(indicator.name);

            if (data.endDate) {
                return `
                    ${indicator.name ? `<div class="b-gantt-task-title">${encodedName}</div>` : ''}
                    <table>
                        <tr><td>${this.L('L{Start}')}:</td><td>${data.startClockHtml}</td></tr>
                        <tr><td>${this.L('L{End}')}:</td><td>${data.endClockHtml}</td></tr>
                    </table>
                `;
            }

            return `
                ${indicator.name ? `<div class="b-gantt-task-title">${encodedName}</div>` : ''}
                ${data.startText}
            `;            }
        }

[MauriceLapre]

I think I can get that to work. Thank you!