Displaying all cell data when hovering over it may prove to be useful for some of you, especially if you need to keep the same width for the grid column.
Fortunately, there is a simple solution for solving this, as all you need is to add a HTML expression, such as:
<span data-qtip="#COLUMN_ALIAS#">#COLUMN_ALIAS#</span>
Here’s an example of how we’ve used it:
Apex 4.2.x
Apex 5.0.x
An the result looks like this:
Grid cell tooltips
You may want to have more control over how the information is displayed, for example splitting a comma separated list of names into multiple rows. To do this you’ll need to override the column renderer using:
"renderer": /**/function(value){
return '<span data-qtip="<b>Names:</b><br />'+value.split(',').join('<br />')+'">'+value+'</span>';
}/**/
Note: the required PLJSON syntax around the code we don’t want escaped i.e. /**/…/**/
APEX 4.2.x
APEX 5.0.x
Which will display all the names in a cell, like this:
Tree Grid Cell Tooltips
If you’re using the treegrid from FOEX v1.x, you’ll need to add it to the column comments section/attribute encapsulated in ext${ ... }$ext:
ext${
"renderer": /**/function(value){
return '<span data-qtip="<b>Names:</b><br />'+value.split(',').join('<br />')+'">'+value+'</span>';
}/**/
}$ext
As a side note, the simplest way to add tooltips anywhere in your application within HTML markup is to use the data-qtip="My Tip" attribute in your HTML tag.
<span data-qtip="<b>Title</b><br />This is a tooltip example">Some Text</span> <div data-qtip="<b>Title</b><br />This is a tooltip example">Some Text</div> <input type="text" data-qtip="<b>Title</b><br />This is a tooltip example"></input>
For more information on the examples provided above please refer to the Sencha documentation as follows:
For FOEX v1.x, use:
- Ext JS 4.0 – Ext.grid.column.Column
- Ext JS 4.0 – Ext.tip.QuickTipManager
- Ext JS 4.0 – Ext.tip.QuickTip
For FOEX v2.x, use:
- Ext JS 4.2 – Ext.grid.column.Column
- Ext JS 4.2 – Ext.tip.QuickTipManager
- Ext JS 4.2 – Ext.tip.QuickTip
Looking to build large-scale web applications fast? Sign up and start developing with FOEX!