columnBubble is shown at different location

When html content is given to args.html, the bubble is shown at different location. When more number of Items added, the bubble keep shifting to the bottom

columnBubble: new DayPilot.Bubble({
    onLoad: (args) => {
        // popup shown at column header as expected
        // args.html = "Heading";

        // popup shown at different location as shown in the figure
        args.html = "<h4>Heading</h4><ul><li>Item-1</li><li>Item-2</li></ul>";

        // popup shift is more than shown in the figure
        // args.html = "<h4>Heading</h4><ul><li>Item-1</li><li>Item-2</li><li>Item-3</li></ul>"; 
    }
}),