View Full Version : Can tooltips work inside a grid panel?

30 Apr 2010, 9:11 AM
I have a grid panel inside a tab panel. I'm trying to get a tooltip to work inside the grid cells. It works outside of the panels. If I just use a qtip inside the grid cell it works. I cannot get the tooltip to work inside a grid cell. Is this possible?

I started with this example (http://www.extjs.com/forum/showthread.php?50195-Ext.ToolTip-inside-a-grid&p=241853#post241853)as a guide.

Here is the beginning of my code. In the function, where val=akefh1, is where I'm trying to get the tooltip to work. The second part, val=hapcok1, works fine with the qtips.

Ext.BLANK_IMAGE_URL = '../../EXT_JS/resources/images/default/images/s.gif';

// example of custom renderer function
function change(val){
if (val == 'akefh1'){
return '<div id="tip2" class="tip-target"><img src="../../images/warning.gif"/></div>';
}else if (val == 'hapcok1'){
return "<img src='../../images/warning.gif' ext:hide:'user' ext:qtip='This is HAPCOK1 warning'/>";
return "<img src='../../images/warning.gif' qtip='generic warning'/>";

var columnRows = new Array;
columnRows = [
{header: "Stock", dataIndex: 'Stock', width: 400, sortable: true, id:'title'},
{header: "FMP", dataIndex: 'fmp', hidden:true, groupName:'FMP'},
{header: "Data Quality", dataIndex: 'DataQuality', width: 75,sortable: false},
{header: "Data Caveats", dataIndex: 'DataCaveat', renderer: change, width: 100, sortable: false},
{header: "Date Published", dataIndex: 'DatePub', renderer: Ext.util.Format.dateRenderer('m/d/Y'), width: 100,sortable: true},
{header: "Link To EFH Text", dataIndex: 'LinkToSrce', width: 100, sortable: false}
];Then there is a bunch of code that builds the tabpanels and gridpanels:

var tabCode = new Ext.TabPanel({
activeTab: 0,
renderTo: 'tabPanelContainer',
height: 500,
items: [{
title: 'Alaska',
id: 'AK',
xtype: 'tabpanel',
activeTab: 0,
items: [{
title: 'EFH',
xtype: 'grid',
stripeRows: true,
store: get_akefh(),
columns: columnRows,
view: groupViewSpecies
}Then it all gets displayed in a div:

<div id='tip2' class='tip-target'><img src='../../images/warning.gif'/></div>
<div id="tabPanelContainer"></div>
</body>The first div is just to prove that I can get the tooltip to work outside of the panels.

30 Apr 2010, 2:21 PM
You would have to change the selection model of the grid from a row selection model to a cell selection model... Otherwise the mouseover event is going to be captured by the row container instead of the individual cell. The cell might still capture the event before it hits your div though, since its nested.

You could try setting trackMouseOver: false on your grid to see if that shows the qtip.

1 May 2010, 12:55 AM