Wie fügen Sie benutzerdefinierte CSS-Tooltip zu extjs Spaltenüberschrift?

Question

Ich bin neu in extjs. Ich versuche, Tooltip vorzugsweise css-basiert zu den Spaltenüberschriften hinzuzufügen. Wie kann ich gehen über das Hinzufügen von benutzerdefinierten Tooltip auf die extjs Spaltenüberschrift mit css? die extjs Standard Weg scheint nicht zu funktionieren.

Ich habe versucht, mit der benutzerdefinierten css-Tooltip für die Kopfzeile und es funktionierte nicht Ist es überhaupt möglich, in extjs zu benutzerdefinierten Tooltip in der Kopfzeile?

Gracias

var listView = Ext.create('Ext.grid.Panel', {
      store: mystore,
      multiSelect: true,
      splitHandleWidth: 10,
      columnLines: true,
       viewConfig: {
        emptyText: 'No images to display'
      },

      renderTo: containerEl,

      columns: [{
        text: '<a href="#" class="ttip" title="'+m.i18n.getString('notif.class')+'">'+e.i18n.getString('notif.class')+'<span class="classic">'+e.i18n.getString('notif.class')+'</span></a>',
        flex: 10,
        dataIndex: 'CName',
        tooltip: 'C Name Some name test',

        renderer: function (value, metaData, record) {
                    return Ext.String.format('<a href="#" class="tooltip2" >{0}<span>{0}</span></a>', value);
                }
      }, {
        text: getString('notif.instance'),
        flex: 30,
        dataIndex: 'IDisplayName',
        renderer: function (value, metaData, record) {

   return Ext.String.format('<a href="#" class="tooltip2" >{0}<span>{0}</span></a>', value);
                }
      }]
    });

CSS

     .ttip {
            border-bottom: 0px dotted #000000; color: #000000; outline: none;
    /*        cursor: help; */
             text-decoration: none;
            position: relative;
        }
        .ttip span {
            margin-left: -999em;
            position: absolute;text-decoration: none;
        }
        .ttip:hover,.ttip:active, .ttip:link,.ttip:visited{text-decoration: none; color:#000;}
        .ttip:hover span {
            border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
            box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
            font-family: Calibri, Tahoma, Geneva, sans-serif;
            position: absolute; left: 1em; top: 2em; z-index: 9999999;
            margin-left: 0; width: 250px; 
        }
        .ttip:hover img {
            border: 0; margin: -10px 0 0 -55px;
            float: left; position: absolute;
        }
        .ttip:hover em {
            font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
            display: block; padding: 0.2em 0 0.6em 0;
        }
        .classic { padding: 0.8em 1em; }
        .custom { padding: 0.5em 0.8em 0.8em 2em; }
        * html a:hover { background: transparent; }
        .classic {background: #FFFFAA; border: 1px solid #FFAD33; }
        .critical { background: #FFCCAA; border: 1px solid #FF3334;    }
        .help { background: #9FDAEE; border: 1px solid #2BB0D7;    }
        .info { background: #9FDAEE; border: 1px solid #2BB0D7;    }
        .warning { background: #FFFFAA; border: 1px solid #FFAD33; }