Row Header Bubble

A bubble can be displayed on row header hover.

JavaScript

// bubble, with async loading
resourceBubble: new DayPilot.Bubble({
    onLoad: function(args) {
      var r = args.source;
      args.async = true;  // notify manually using .loaded()
            
      // simulating slow server-side load
      setTimeout(function() {
        args.html = "testing bubble for: <br>" + r.id;
        args.loaded();
      }, 500);
    }
})

To add a bubble for a specific row header column, you can use an active area:

onBeforeRowHeaderRender: args => {
    if (args.row.id === "A") {
        args.row.columns = [];
    }

    if (args.row.columns[1]) {
        args.row.columns[1].areas = [
            {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
                action: "Bubble",
                bubble: new DayPilot.Bubble({
                    onLoad: args => {
                        const row = dp.rows.find(args.source.id);
                        console.log("row", row);
                        args.html = "bubble HTML";
                    }
                })
            }
        ]
    }
},

<DayPilot:DayPilotScheduler runat="server" id="DayPilotScheduler1"
  ...
  ResourceBubbleID = "DayPilotBubble1"
/>

<DayPilot:DayPilotBubble ID="DayPilotBubble1" runat="server" 
  CssOnly="true"
  CssClassPrefix="bubble_default"
/>