PDA

View Full Version : Tooltips in Grid rows/cells



paulharv
13 Aug 2010, 6:20 AM
I have an editable grid and I need tooltips in the rows themselves, so I have this...



...
{
header: 'ID',
tooltip: 'ID (Ideas with an asterisk must be rated)',
dataIndex: 'seq',
width: 60,
menuDisabled: true,
sortable: true,
renderer: function(value, cell, record) {
cell.attr = 'ext:qtip="ID (* means 'must be rated')"';
var str = "<p style='white-space:normal'>" + value + "</p>";
return str;
}
},
...



So the cell.attr = 'ext:qtip="ID (Ideas with an asterisk must be rated)"'; part adds a tooltip to the cells, and it works to a point.

What happens is, the tooltip only appears when I mouseover one precise little point on the <div> that Ext wraps the cell contents in. Here'e the markup produced by the above code...



<td class="x-grid3-col x-grid3-cell x-grid3-td-3" tabindex="0" style="width: 58px;">
<div class="x-grid3-cell-inner x-grid3-col-3" ext:qtip="ID (* means 'must be rated')" unselectable="on">
<p style="white-space: normal;">1 <span style="font-weight: bold; font-size: 12pt;">*</span></p>
</div>
</td>


Can I set the tooltip on the <td> instead of the <div> and will that buy me a tooltip that is easy to display - just want to hover somewhere in the cell and get the tooltip...

Thanks

Animal
13 Aug 2010, 6:27 AM
Use one single ToolTip targeted on the GridView's mainBody, and using the delegate option.

This is specifically what that option was added for.

paulharv
16 Aug 2010, 6:32 AM
Thanks,

So I followed up on your post and read up on delegate and stuff, and have code shown below, but nothing happening yet, so there's something I'm not getting...



...
// onRender() of GridPanel. I have verified it gets called
onRender: function() {
// getGridPanel() is custom helper returning the GridEditorPanel
var view = this.getGridPanel().getView();
this.getGridPanel().tip = new Ext.ToolTip({
target: view.mainBody,
delegate: '.x-grid3-td-3',
trackMouse: true,
renderTo: document.body,
listeners: {
beforeshow: function (tip){
tip.body.dom.innerHTML = 'ANYTHING WILL DO';
}
}
})
}
...


The HTML markup looks like this, and I want the TD's to trigger the tooltip


<td class="x-grid3-col x-grid3-cell x-grid3-td-3" tabindex="0" style="width: 58px;">
<div class="x-grid3-cell-inner x-grid3-col-3" ext:qtip="ID (* means 'must be rated')" unselectable="on">
<p style="white-space: normal;">1 <span style="font-weight: bold; font-size: 12pt;">*</span></p>
</div>
</td>

I want the <td> with a class of "x-grid3-col x-grid3-cell x-grid3-td-3" to trigger the tip. I've tried numerous permutations of selectors for the delegate config.

Appreciate any pointers...

Animal
16 Aug 2010, 6:37 AM
Workd right off for me:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/yetagainitworks.jpg

Animal
16 Aug 2010, 6:38 AM
What version of Ext?

paulharv
16 Aug 2010, 7:03 AM
Well I'm on the right track then!
It's 3.0.0.
Thanks

Animal
16 Aug 2010, 9:55 AM
Why on such an old version? I think that's your prob.

deejayns
18 Oct 2010, 4:45 PM
One Q... pls; Can this tooltip be applied to something smaller than a gridpanel cell!? Actually I have a template column inside where have a number of rows (div's) and trying to get tooltip target one of them? Any idea?

Thanks.

Animal
18 Oct 2010, 9:13 PM
Of course. Just use the correct delegate setting using classes that you assign in your template.