Custom Tooltips

By default ApexGantt shows a built-in tooltip when hovering a task bar, displaying the task name, start date, end date, and progress. Replace it entirely with a tooltipTemplate function.

tooltipTemplate

tooltipTemplate receives the resolved Task object and the active dateFormat string, and must return an HTML string. The library renders it as innerHTML inside the tooltip container.

const gantt = new ApexGantt(document.getElementById('chart'), {
  series: tasks,
  tooltipTemplate: (task, dateFormat) => `
    <div style="padding: 10px 14px; min-width: 200px;">
      <div style="font-weight: 600; margin-bottom: 6px;">${task.name}</div>
      <div>Start: <strong>${task.startTime}</strong></div>
      <div>End: <strong>${task.endTime}</strong></div>
      <div>Progress: <strong>${task.progress}%</strong></div>
    </div>
  `,
})

Task object fields

The task argument is the fully resolved Task object — it extends TaskInput with computed properties:

Field	Type	Description
id	string	Unique task identifier
name	string	Display name
startTime	string	Start date string
endTime	string	End date string (always present after normalisation)
progress	number	Completion percentage (0–100)
type	TaskType	'task', 'milestone', or 'summary'
parentId	string | undefined	Parent task ID
wbs	string | undefined	Work Breakdown Structure code (e.g. '1.2.3')
level	number | undefined	Nesting depth (0 = top-level)
barBackgroundColor	string | undefined	Per-task bar color override
assignees	Assignee[]	Assigned people (if set on the task)
baseline	BaselineInput | undefined	Planned start/end if set
left	number | undefined	Computed x-offset in the timeline (pixels)
width	number | undefined	Computed bar width (pixels)

Styling the tooltip container

Use tooltipBGColor and tooltipBorderColor to style the container that wraps your template's output:

const gantt = new ApexGantt(el, {
  series: tasks,
  tooltipBGColor: '#1E293B',
  tooltipBorderColor: '#334155',
  tooltipTemplate: (task) => `
    <div style="padding: 10px 14px; color: #F1F5F9; min-width: 220px;">
      <div style="font-weight: 600; font-size: 14px; margin-bottom: 8px;">${task.name}</div>
      <div style="font-size: 12px; display: flex; justify-content: space-between; gap: 16px;">
        <span>Start</span><strong>${task.startTime}</strong>
      </div>
      <div style="font-size: 12px; display: flex; justify-content: space-between; gap: 16px;">
        <span>End</span><strong>${task.endTime}</strong>
      </div>
      <div style="margin-top: 8px; background: #334155; border-radius: 4px; height: 6px;">
        <div style="width: ${task.progress}%; background: #60A5FA; height: 100%; border-radius: 4px;"></div>
      </div>
      <div style="font-size: 11px; margin-top: 4px; color: #94A3B8;">${task.progress}% complete</div>
    </div>
  `,
})

Showing assignees

When tasks include an assignees array, render them in the tooltip:

const gantt = new ApexGantt(el, {
  series: tasks,
  tooltipTemplate: (task) => {
    const assigneeHtml = (task.assignees ?? [])
      .map(a => `<span title="${a.name}" style="
        display:inline-flex; align-items:center; justify-content:center;
        width:24px; height:24px; border-radius:50%; background:${a.color ?? '#64748B'};
        color:#fff; font-size:10px; font-weight:600;
      ">${a.initials ?? a.name.slice(0,2).toUpperCase()}</span>`)
      .join('')

    return `
      <div style="padding: 10px 14px; min-width: 200px;">
        <div style="font-weight: 600; margin-bottom: 6px;">${task.name}</div>
        <div style="font-size: 12px; color: #64748B;">
          ${task.startTime} → ${task.endTime}
        </div>
        ${assigneeHtml ? `<div style="margin-top:8px; display:flex; gap:4px;">${assigneeHtml}</div>` : ''}
      </div>
    `
  },
})

Suppressing the tooltip

Return an empty string from tooltipTemplate to suppress the tooltip entirely. The container still exists in the DOM but is invisible:

tooltipTemplate: () => '',

React example

import { ApexGanttChart } from 'react-apexgantt'
import type { Task, GanttUserOptions } from 'react-apexgantt'

function buildTooltip(task: Task): string {
  return `
    <div style="padding:10px 14px;min-width:200px">
      <div style="font-weight:600;margin-bottom:6px">${task.name}</div>
      <div style="font-size:12px">
        <div>${task.startTime} → ${task.endTime}</div>
        <div style="margin-top:4px">${task.progress}% complete</div>
        ${task.wbs ? `<div style="color:#64748B;margin-top:2px">WBS: ${task.wbs}</div>` : ''}
      </div>
    </div>
  `
}

const options: Omit<GanttUserOptions, 'series'> = {
  tooltipBGColor: '#FFFFFF',
  tooltipBorderColor: '#E2E8F0',
  tooltipTemplate: buildTooltip,
}

export default function TooltipGantt() {
  return <ApexGanttChart tasks={tasks} options={options} height="500px" />
}

Vue example

<template>
  <ApexGanttChart :tasks="tasks" :options="ganttOptions" height="500px" />
</template>

<script setup lang="ts">
import type { GanttUserOptions, Task } from 'vue-apexgantt'

const ganttOptions: Partial<GanttUserOptions> = {
  tooltipBGColor: '#FFFFFF',
  tooltipBorderColor: '#E2E8F0',
  tooltipTemplate: (task: Task) => `
    <div style="padding:10px 14px;min-width:200px">
      <div style="font-weight:600;margin-bottom:6px">${task.name}</div>
      <div style="font-size:12px">${task.startTime} → ${task.endTime}</div>
      <div style="font-size:12px">${task.progress}% complete</div>
    </div>
  `,
}
</script>