Tooltips must be built in same closure they are used?

[angrytongan]

Having some trouble understanding how tooltips are bound. The example below uses 4 tooltips on 4 icons, but only 3 tooltips are shown. Probably my misunderstanding of how the elements are related to siblings / parents at creation time. Any help would be greatly appreciated.

const {
    Icon,
    Tooltip,
} = CUI;

const prebuiltTooltip = m(Tooltip, {
    content: 'prebuilt broken tooltip',
    trigger: m(Icon, {
        name: 'frown',
    }),
});

const functionBuiltTooltip = () => {
    return m(Tooltip, {
        content: 'function built non-broken tooltip',
        trigger: m(Icon, {
            name: 'smile',
        })
    });
};

const TooltipTesting = {
    view: () => {
        const closureBuiltTooltip = m(Tooltip, {
            content: 'closure-built non-broken tooltip',
            trigger: m(Icon, {
                name: 'smile',
            }),
        });

        return m('', [
            prebuiltTooltip,
            functionBuiltTooltip(),
            closureBuiltTooltip,
            m(Tooltip, {
                content: 'non-broken tooltip',
                trigger: m(Icon, {
                    name: 'smile',
                }),
            }),
        ]);
    }
};

document.addEventListener('DOMContentLoaded', () => {
    m.route(document.body, '/', {
        '/': TooltipTesting
    });
});

[angrytongan]

Not a bug - I've demonstrated a mithril Component anti-pattern.