html5 gantt chart task bubble extended tooltip

The Gantt chart can display additional task details using a a bubble (an extended tooltip).

Each task can display two types of bubble:

  • box bubble
  • row bubble

Box bubble

The box bubble is displayed when you hover the the task box:

html5 gantt chart box bubble

This bubble type is configured using bubbleTask property (set to a new DayPilot.Bubble() object by default).

Row bubble

The row bubble appears when you hover the row header on the left side of the Gantt chart:

html5 gantt chart row bubble

This bubble type is configure using bubbleRow property (set to a new DayPilot.Bubble() object by default).

Specifying the bubble text using task data object

You can specify the task bubble HTML using the task data object (box.bubbleHtml and row.bubbleHtml properties).

dp.tasks.list = [
  {
    "start":"2018-11-21T00:00:00",
    "end":"2018-11-23T00:00:00",
    "id":"35d3a9a4-832d-c21f-9316-439f63e1bf9d",
    "text":"Task 0",
    "box":{
      "bubbleHtml":"Task details (box): <br/>Task 0<br>Starting on November 21, 2018",
      "html":"22%",
      "htmlRight":"Subtask 1"
    },
    "row":{
      "bubbleHtml":"Task details (row): <br/>Task 0<br>Starting on November 21, 2018"
    }
  }
];

Specifying the bubble using onBeforeTaskRender

It's possible to specify the bubble text on the client side using the task customization event handler (onBeforeTaskRender).

dp.onBeforeTaskRender = function(args) {
  args.data.box = { bubbleHtml: "Task details (box): <br/>" + args.data.text + "<br>Starting on " + args.data.start.toString("MMMM d, yyyy") };
  args.data.row = { bubbleHtml: "Task details (row): <br/>" + args.data.text + "<br>Starting on " + args.data.start.toString("MMMM d, yyyy") };
};