Tooltip not showing for dynamically added summaries

[ghulamghousdev]

Forum post

To reproduce this issue, please use the below config in groupSummary example for scheduler. Then click on addSummaries button and hover on the summaries.

import '../_shared/shared.js'; // not required, our example styling etc.
import Scheduler from '../../lib/Scheduler/view/Scheduler.js';
import '../../lib/Scheduler/feature/GroupSummary.js';
import '../../lib/Scheduler/column/ResourceInfoColumn.js';
import StringHelper from '../../lib/Core/helper/StringHelper.js';

const maxValue = 10;

const scheduler = new Scheduler({
    appendTo          : 'container',
    eventStyle        : 'border',
    resourceImagePath : '../_shared/images/users/',

    features : {
        //stripe       : true,
        group        : {            disabled : true, field : 'category' },
        groupSummary : {
            collapseToHeader : true,
            disabled         : true,
            summaries        : []
        }
    },

    columns : [
        {
            text   : 'Category',
            width  : 100,
            field  : 'category',
            hidden : true
        },
        {
            type      : 'resourceInfo',
            text      : 'Staff',
            width     : 170,
            summaries : [{ sum : 'count', label : 'Employees' }]
        },
        {
            text      : 'Employment type',
            width     : 130,
            field     : 'type',
            summaries : [
                {
                    sum   : (result, record) => result + (record.type === 'Part time' ? 1 : 0),
                    label : 'Part time'
                }
            ]
        }
    ],

    rowHeight : 55,
    barMargin : 5,
    startDate : new Date(2024, 3, 21),
    endDate   : new Date(2024, 4, 5),

    // Customize preset
    viewPreset : {
        base              : 'dayAndWeek',
        displayDateFormat : 'YYYY-MM-DD',
        timeResolution    : {
            unit      : 'day',
            increment : 1
        }
    },

    crudManager : {
        autoLoad  : true,
        transport : {
            load : {
                url : 'data/data.json'
            }
        },
        // This config enables response validation and dumping of found errors to the browser console.
        // It's meant to be used as a development stage helper only so please set it to false for production systems.
        validateResponse : true
    },

    tbar : {
        items : {
            addSummaries : {
                type    : 'button',
                text    : 'Add Summaries',
                onClick : () => {

                    scheduler.features.group.disabled = false;

                    scheduler.features.groupSummary.tooltipTemplate = ({ groupSummaryValues, startDate, endDate, eventStore, resourceStore, events, resources, groupRecord, groupField, groupValue }) => {

                        let tipHtml = `<header>${groupValue} at ${scheduler.getFormattedDate(startDate)}</header>`;

                        groupSummaryValues.forEach(({ label = '', text }) => {
                            tipHtml += `<div class="tip-item"><span class="label">${label}</span><span>${text || 0}</span></div>`;
                        });

                        return tipHtml;
                    };

                    scheduler.features.groupSummary.summaries = [
                        {
                            label    : 'Full time',
                            renderer : ({ events }) => {
                                // Only count events for resources that are "Full time"
                                return events.filter(
                                    (event) => event.resource.type === 'Full time'
                                ).length;
                            }
                        },
                        {
                            label    : 'Part time',
                            renderer : ({ events }) => {
                                return events.reduce((result, event) => {
                                    // Only count events for resources that are "Part time"
                                    return (
                                        result +
                              (event.resource.type === 'Part time' ? 1 : 0)
                                    );
                                }, 0);
                            }
                        },
                        {
                            label : 'Total',
                            renderer({ events }) {
                                const value = Math.min(1, events.length / maxValue),
                                    height = 100 * value + '%';

                                return `
                           <div class="bar-outer">
                               <div class="bar-inner" style="height: ${height}"><label class="${
                            value > 0.5 ? 'b-summarybar-label-inside' : ''
                          }">${events.length || ''}</label></div>
                           </div>
                        `;
                            }
                        }
                    ];
                    scheduler.features.groupSummary.disabled = false;
                }
            }
        }
    }
});