title: How add custom css tooltip to extjs column header?
body: <p>I  am new to extjs . I am trying to add tooltip preferably css based  to the column headers .
  How can I go about adding custom tooltip to the extjs column header using css? the extjs  default way doesnt seem to work.</p>
  
  <p>I tried using the custom css  tooltip for the header and it didnt  work .. Is it at all  possible in extjs to custom tooltip on the header?</p>
  
  <p>Thanks</p>
  
  <pre><code>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: '&lt;a href="#" class="ttip" title="'+m.i18n.getString('notif.class')+'"&gt;'+e.i18n.getString('notif.class')+'&lt;span class="classic"&gt;'+e.i18n.getString('notif.class')+'&lt;/span&gt;&lt;/a&gt;',
          flex: 10,
          dataIndex: 'CName',
          tooltip: 'C Name Some name test',
  
          renderer: function (value, metaData, record) {
                      return Ext.String.format('&lt;a href="#" class="tooltip2" &gt;{0}&lt;span&gt;{0}&lt;/span&gt;&lt;/a&gt;', value);
                  }
        }, {
          text: getString('notif.instance'),
          flex: 30,
          dataIndex: 'IDisplayName',
          renderer: function (value, metaData, record) {
  
  
     return Ext.String.format('&lt;a href="#" class="tooltip2" &gt;{0}&lt;span&gt;{0}&lt;/span&gt;&lt;/a&gt;', value);
                  }
        }]
      });
  </code></pre>
  
  <p>CSS </p>
  
  <pre><code>     .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; }
  
  ​
  </code></pre>