PDA

View Full Version : Tooltips on column cells?



whirling dervish
16 May 2012, 11:50 AM
Is there a way to put a tooltip on columns that are not of the type of Action (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Action)?

If not, why are tooltips limited to that one type of column?

whirling dervish
16 May 2012, 12:53 PM
I found a workable solution in this thread, http://www.sencha.com/forum/showthread.php?189654-Adding-Tooltip-to-Grid-Row.



function createTooltip(view) {
view.tip = Ext.create('Ext.tip.ToolTip', {
// The overall target element.
target: view.el,
// Each grid row causes its own seperate show and hide.
delegate: view.itemSelector,
// Moving within the row should not hide the tip.
trackMouse: true,
// 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 (tip) {
var tooltip = view.getRecord(tip.triggerElement).get('tooltip');
if(tooltip){
tip.update(tooltip);
} else {
tip.on('show', function(){
Ext.defer(tip.hide, 10, tip);
}, tip, {single: true});
}
}
}
});
}
Ext.QuickTips.init();

var grid = Ext.create('Ext.grid.Panel', {
...
viewConfig: {
listeners: {
render: createTooltip
}
}
...
});


Is that the best practice way to add tooltips?

scottmartin
17 May 2012, 9:41 AM
See if this will work:




function renderTip(val, meta, rec, rowIndex, colIndex, store) {
// meta.tdCls = 'cell-icon'; // icon
meta.tdAttr = 'data-qtip="Icon Tip"';
return val;
};

{ dataIndex: 'type_name', header: 'Type', filter: true, renderer: renderTip },



Regards,
Scott.

whirling dervish
21 May 2012, 6:25 AM
That works great Scott and seems a lot more straight forward, thank you.

I can get it to behave just like the other example by changing the meta.tdAttr assignment to,

meta.tdAttr = 'data-qtip="' + rec.data.tooltip + '"';

iplanit
2 Oct 2012, 3:16 AM
Useful post, I needed to chante the style and add a tooltip and this help me using Sench Architect (the val is value, the only change in the variable names), thanks scottmartin.

Regards


See if this will work:




function renderTip(val, meta, rec, rowIndex, colIndex, store) {
// meta.tdCls = 'cell-icon'; // icon
meta.tdAttr = 'data-qtip="Icon Tip"';
return val;
};

{ dataIndex: 'type_name', header: 'Type', filter: true, renderer: renderTip },



Regards,
Scott.

mazhar.shaikh
12 Nov 2013, 5:56 PM
How about a date column tooltip? ExtJS 4.1.3 doesnt have render config.