ExtJs add tool tip to grid cell text

Question

I am using Extjs for creating UI. So I created grid, with column. My task is to add tool tip to some cells but only on part of text. I tried to use meta.tdAttr = 'data-qtip="Activity is in use"'; looks like it works, but sets tooltip on whole cell, when I want only on some text.

Here is my realization:

                        {
                            hideable : false,
                            width : 200,
                            flex : 1,
                            dataIndex : 'name',
                            text : 'Name',
                            renderer :  function(value, meta, record) {
                                meta.tdCls += ' '
                                        + this.getValidation()
                                                .getHighestLevelCls(
                                                        record.modelType,
                                                        record.id);
                                var inUseClass = '';
                                if (record.get('descendants').length > 0) {
                                    meta.tdAttr = 'data-qtip="Activity is in use"'; // here is tool tip setter
                                    inUseClass = Glyphs
                                            .getIconClass('dot-circle-o');
                                } else {
                                    inUseClass = Glyphs
                                            .getIconClass('circle-o');
                                }
                                return Glyphs.wrapClass(inUseClass,
                                        'font-size:10; color:black;',
                                        '&nbsp;&nbsp;')
                                        + value;
                            }
                        }

As you can see in cell I print Glyph (it is some kind of icon interpretated as text, taken from AwesomeFonts.com) + value (text value), so I need to show tooltip when I hover with mouse only Glyth. Maybe someone can suggest me any sollution?

jacoviza jacoviza · Accepted Answer · 2015-03-24T18:33:36

You could try returning a <span> from the renderer, applying all the attributes to it instead:

renderer: function(value) {
    return '<span data-qtitle="QTip Example" data-qwidth="200" '+
           'data-qtip="This is a quick tip from a custom renderer!">'+
            value+'</span>';
}},

A fiddle here. (I tried with normal text, but the concept is similar)

ExtJs add tool tip to grid cell text

1 Answers