How add custom css tooltip to extjs column header? - extjs

Question

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.
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?
Thanks
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: ''+e.i18n.getString('notif.class')+'<span class="classic">'+e.i18n.getString('notif.class')+'</span>',
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; }
​

Answer 1

So, I noticed you provided code for your store, but you are asking a question about the grid, which is a different component. Make sure you understand the relationship between the grid and the store. You should also use a Model definition instead of configuring fields on the store - which is the old way of doing things.
Having said that, I did come up with an interesting solution to your question: how to add a tooltip to the column header.
The column definition takes in a 'text' property that gets converted to the column header. The docs state that HTML tags are allowed, which means you can set a tooltip this way:
text: '<span data-qtip="hello">First Name</span>'
where data-qtip provides the text for the tooltip.
Note that tooltips must be enabled via:
Ext.QuickTips.init(); in your app.
To try other things use the docs Live Preview feature to quickly test out different configs and see them in action. http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Column
UPDATE: a tooltip property is now(since 4.1x) available on column config. Use that.

Answer 2

In the definition of your columns you only need set the tooltip parameter, like this:
var cm = new Ext.grid.ColumnModel([
{
xtype: 'column',
header: '<img src="../images/lupa.png">',
align: 'center',
dataIndex: 'consultar',
width: 50,
sortable: true,
menuDisabled: true,
tooltip: 'Permisos para consultar, si lo desactiva el usuario no verá el modulo'
}
]);
I hope this help you