Kanban Card Bubble Hover Callout

The Kanban component can display a callout/tooltip with additional information on card hover. This is useful when the card box is too small to display all important information.

To enable a card bubble, you need to create a new DayPilot.Bubble object and assign it to the bubble property.

The DayPilot.Bubble object lets you define the appearance and behavior of the tooltip, such as the popup delay, animation, CSS theme. You can also use it to load the content on demand.

Available since 2025.3.6603.

Demo

Static Bubble Content

First, it is necessary to enable the bubble in the Kanban config:

{
   bubble: new DayPilot.Bubble(),
   // ...
}

Now you can use the bubbleHtml property of a card object to define the static HTML content:

const cards = [
    {id: 1, "name": "Task 1", column: "1", text: "This is a description of task #1.", bubbleHtml: "Details for Task 1"},
    {id: 2, "name": "Task 2", column: "1", text: "This is a description of task #2.", bubbleHtml: "Details for Task 2"},
    {id: 3, "name": "Task 3", column: "1", text: "This is a description of task #3.", bubbleHtml: "Details for Task 3"},
    {id: 4, "name": "Task 4", column: "1", text: "This is a description of task #4.", bubbleHtml: "Details for Task 4"},
    {id: 5, "name": "Task 5", column: "2", text: "This is a description of task #5.", bubbleHtml: "Details for Task 5"},
];

kanban.update({cards});

Dynamic Bubble Content

When creating the DayPilot.Bubble object, use the onLoad event to create the content dynamically.

The card object will be available as args.source:

{
  bubble: new DayPilot.Bubble({
    onLoad: async (args) => {
        const card = args.source;
        args.async = true;
        
        const {data} = await DayPilot.Http.get(`/api/bubbleContent/${card.data.id}`);
        
        args.html = data.html;
        args.loaded();
    }
  }),
  // ...
}