How to set tooltip for treelist in ExtJS?

Question

I'm developing an ExtJs application. I want to use a treelist as follow:

{
    xtype: 'treelist',
    bind: '{navimgation}',
    ...
}

My navimgation in my model is as follow:

navimgation: {
    type: 'tree',
    root: {
        children: [{
            text: 'Node1',
            leaf: true,
            qtip: 'My qtip 1'
        },{
            text: 'Node2',
            leaf: true,
            qtip: 'My qtip 2'
        }
        ...
        ]
    }
}

I want to show a tooltip when mouse is over node, but it is not working.

What did you do before ? Did you set `Ext.QuickTips.register`? Please give some more code — Dariush Jafari, Aug 09 '15 at 08:38
Have you seen [How should I add a tooltip to an ExtJS Component?](http://stackoverflow.com/questions/5838646/how-should-i-add-a-tooltip-to-an-extjs-component) — Dariush Jafari, Aug 09 '15 at 10:03

score 1 · Accepted Answer · answered Dec 14 '17 at 11:51

Looks like there is an issue with Ext.list.Tree qtip and qtitle configs.

Passing html in text config will work for now.

e.g. <span title="Homework qtip">Homework</span>

Here is an example, i have tried with treelist configs.

https://fiddle.sencha.com/#view/editor&fiddle/2b03

score 0 · Answer 2 · answered Mar 16 '23 at 01:14

I know this was a long time ago. Here is another solution that works in ExtJs 7.6.0:

var treeList = Ext.create({
    xtype: 'treelist',
    store: {
        root: {
            id: 1,
            expanded: true,
            children: [{
                id: 2,
                text: 'detention',
                leaf: true,
                iconCls: 'x-fa fa-frown-o',
                qtitle: 'Detention qtip',
                qtip: 'Detention qtip'
            }, {
                id: 3,
                text: '<span title="Homework qtip">Homework</span>',
                expanded: true,
                iconCls: 'x-fa fa-folder',
                qtitle: 'Homework qtip',
                children: [{
                    id: 4,
                    text: '<span title="Book Report qtip">Book Report</span>',
                    leaf: true,
                    iconCls: 'x-fa fa-book',
                    qtip: 'book report qtip'
                }, {
                    id: 5,
                    text: 'algebra',
                    leaf: true,
                    iconCls: 'x-fa fa-graduation-cap',
                    qtip: 'algebra qtip'
                }]
            }, {
                id: 6,
                text: 'buy lottery tickets',
                leaf: true,
                iconCls: 'x-fa fa-usd',
                qtip: 'buy lottery tickets qtip'
            }]
        }
    },
    renderTo: Ext.getBody()
});

var tip = Ext.create('Ext.tip.ToolTip', {
    // The overall target element.
    target: treeList.el,
    // Each grid row causes its own separate show and hide.
    delegate: '.x-treelist-row-over',
    // Moving within the row should not hide the tip.
    trackMouse: false,
    // Render immediately so that tip.body can be referenced prior to the first show.
    renderTo: Ext.getBody(),
    listeners: {
        // Change content dynamically depending on which element triggered the show.
        beforeshow: function updateTipBody(tip) {
            //debugger;
            function getParentElem(elem) {
                if (!elem) {
                    return null;
                } else if (elem.getAttribute('data-recordid')) {
                    return elem;
                } else {
                    return getParentElem(elem.parentNode);
                }
            }

            //debugger;
            var elem = getParentElem(tip.triggerElement);
            if (!elem) {
                return;
            }
            var store = treeList.getStore();
            var dataRecordId = elem.getAttribute("data-recordid");
            console.log(`dataRecordId = ${dataRecordId}`);
            var internalId = parseInt(dataRecordId);
            console.log(`Internal id = ${internalId}`);
            var node = store.getByInternalId(internalId);

            var qtip = node.data.text;
            if (node.data.qtip)
                qtip = node.data.qtip;
            //console.log(node.data.qtip);
            tip.update(qtip);
            //debugger;
            // debugger;
        },

    }
});

https://fiddle.sencha.com/#view/editor&fiddle/3n2r

Weirdly enough, the icons for the Neptune, Crisp themes are broken - not sure why.

KavitaC · Answer 3 · 2015-08-17T20:39:15.100

Let me know if this works. I haven't played much with trees yet but you can try this is JSFiddle or your code.

navimgation: {
    type: 'tree',
    root: {
        children: [{
            text: 'Node1',
            leaf: true,
            renderer: function (val, meta, rec) {
                    meta.tdAttr = 'data-qtip="This is my tooltip"';
                            return val;
            }
        },{
            text: 'Node2',
            leaf: true,
            renderer: function (val, meta, rec) {
                    meta.tdAttr = 'data-qtip="This is my tooltip"';
                            return val;
            }
        }
        ...
        ]
    }
}

Can you add an explanation how and where to use this code snippet? Raw code blocks aren't always useful, especially to new coders. — Ryan Bemrose, Aug 15 '15 at 01:16

How to set tooltip for treelist in ExtJS?

3 Answers3