Bryntum Support Forums

Dear Bryntum:
I had a quick question about wanting to "customize" the task tooltip (taskTooltip) feature? I wanted to remove or disable the "Complete" property in the task tooltip that shows up when hovering over the slider bar in the right-hand side of the gantt chart.

I have highlighted in red the property ("Complete") that I do not want to show. All the others are fine -- -- but wanted to see if there was an easy way to disable just this one property?

The way I have tried to do it is shown below in the following code snippet. This is being done within my ganttConfig file. In the "features" property -- I am trying to access the complete field within the taskTooltip property. This has not worked -- and was hoping that you could show me with a quick code snippet how to do this correctly? I have tried to use "complete" or "percentDone" -- and neither of them have worked. I could not find in the docs another way to disabled just the one "Complete" property. I was able to disable the entire taskTooltip -- but again would like to include that with only the other properties.

I look forward to your response. Thanks for your help with this.

Here is the code snippet below -- of my "ganttConfig":

features: {
      taskTooltip : {
            complete: false,
        }
    },

You need to specify your own template with data you need.
Docs: https://bryntum.com/products/gantt/docs/api/Gantt/feature/TaskTooltip#showing-custom-html-in-the-tooltip

Origin template code:

            template(data) {
                const
                    me              = this,
                    { taskRecord }  = data,
                    displayDuration = me.client.formatDuration(taskRecord.duration, me.decimalPrecision);

            return `
                ${taskRecord.name ? `<div class="b-gantt-task-title">${StringHelper.encodeHtml(taskRecord.name)}</div>` : ''}
                <table>
                <tr><td>${me.L('L{Start}')}:</td><td>${data.startClockHtml}</td></tr>
                ${taskRecord.milestone ? '' : `
                    <tr><td>${me.L('L{End}')}:</td><td>${data.endClockHtml}</td></tr>
                    <tr><td>${me.L('L{Duration}')}:</td><td class="b-right">${displayDuration} ${DateHelper.getLocalizedNameOfUnit(taskRecord.durationUnit, taskRecord.duration !== 1)}</td></tr>
                    <tr><td>${me.L('L{Complete}')}:</td><td class="b-right">${taskRecord.renderedPercentDone}%</td></tr>
                `}
                </table>                 
            `;
        },

Thank you very much -- this helped me to see how to implement. This solved my issue. You can complete this post.
Thanks!